Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2018, 14:58
Новичок на форуме
Отправить личное сообщение для xecic Посмотреть профиль Найти все сообщения от xecic
 
Регистрация: 20.08.2018
Сообщений: 4

Как нарисовать треугольник зная вершины?
Как зная три вершины(x, y, z координаты) нарисовать треугольник в div`е? Ввожу три вершины(x, y, z) и на основании их рисуется треугольник. Ввод всех всех данных я сделал, но как рисовать треугольник на основании переменных из js? Есть какие то библиотеки?
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2018, 15:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

лучше canvas, библиотеки в принципе не нужны. нужен школьный курс геометрии
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2018, 16:09
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

ещё можно SVG
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2018, 20:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

connectionItem соединить блоки линией треугольниик
xecic,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      position: relative;
       height: 700px;
  }

  hr.connection{
    position: absolute;
    width: 500px;
    height: 2px;
    background-color: #FF0000;
    padding: 0;
    margin: 0;
    z-index: 2;
    margin-top: 4px;
    margin-left: 4px;
    z-index: -1;
  }

  .one {
    background-color: #FFD700;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    border: 4px solid #8B4513;

  }
  div.hot{
      position: relative;
      width: 500px;
      height: 500px;
      border: 1px dashed Gray;
      margin: 20px auto;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
(function($) {
    $.fn.connectionItem = function(options) {
        var defaults = {
            to: $(window),
            parent : "body"
        };
        var settings = $.extend({}, defaults, options);
        return this.each(function() {
            var from = $(this);
            var x0, y0;
            var x, y, x1, y1, r;
            var to = $(settings.to);
            var hr = $("<hr/>", {
                "class": "connection",
                css: {
                    position: "absolute"
                }
            }).appendTo(settings.parent);
            hr.css("transform-origin", 0);
            hr.css("-moz-transform-origin", 0);
            hr.css("-webkit-transform-origin", 0);
            hr.css("-o-transform-origin", 0);

            function fn() {
                var pos = from.position();
                x0 = pos.left + from.width() / 2;
                y0 = pos.top + from.height() / 2;
                pos = to.position();
                x1 = pos.left + to.width() / 2;
                y1 = pos.top + to.height() / 2;
                x = x1 - x0;
                y = y1 - y0;
                var w = Math.sqrt(x * x + y * y);
                r = 360 - 180 / Math.PI * Math.atan2(y, x);
                hr.css({
                    left: x0,
                    top: y0,
                    width: w
                });
                hr.css("transform", "rotate(-" + r + "deg)");
                hr.css("-moz-transform", "rotate(-" + r + "deg)");
                hr.css("-webkit-transform", "rotate(-" + r + "deg)");
                hr.css("-o-transform", "rotate(-" + r + "deg)")
            }
            $(window).on({
                resize: fn,
                load: fn
            })
        })
    }
})(jQuery);
$(function() {
    function rand(a) {
        return 5 + Math.floor(Math.random() * a)
    }
    var from ;
    $.each(Array(3), function(indx, element) {
        var div = $("<div>", {
            css: {
                top: rand(80) + "%",
                left: rand(80) + "%"
            },
            "class": "one"
        }).appendTo(".hot");
        from && from.connectionItem({
            to: div,
            parent : ".hot"
        });
        from = div
    })
   from.connectionItem({
            to: '.one',
            parent : ".hot"
        });
});
  </script>
</head>

<body>
<div class="hot"></div>
</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
paperjs: как нарисовать строчки o5andrey Библиотеки/Тулкиты/Фреймворки 3 06.02.2017 08:38
Как нарисовать график на javascript? Бобр Общие вопросы Javascript 21 30.03.2014 17:27
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20
Как нарисовать такой фон сайта? SDron Общие вопросы Javascript 5 10.02.2009 15:58