Рисование линии в div с помощью Javascript

0

С холстом вы можете нарисовать линию с javascript, как это,

<html>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</html>

Как я могу сделать то же самое, но используя тег div вместо холста? Причина, по которой я хочу сделать это, - это то, что холст не работает на IE, и я знаю, что в графиках Google используются теги div, а не холсты для рисования графиков, поэтому это может быть возможно.

Я попытался заменить холст на div, но он не работает.

  • 0
    Для очень простой строки вы можете использовать тег HR и добавить стиль к нему.
  • 1
    Canvas поддерживается начиная с IE 9 ( caniuse.com/#search=canvas ). Вы не можете сделать это с div.
Показать ещё 2 комментария
Теги:
canvas

5 ответов

7

Использование JQuery:

<div id='rPaper'></div>

Jquery

 x1 = 50, y1 = 50,
 x2 = 350, y2 = 50;
 drawnode(x1, y1);
 drawnode(x2, y2);
 drawline(x1, y1, x2, y2);


 function drawnode(x, y) {

     var ele = ""
     var style = "";
     style += "position:absolute;";
     style += "z-index:100;"
     ele += "<div class='relNode' style=" + style + ">";
     ele += "<span> Test Node</span>"
     ele += "<div>"

     $('#rPaper').show();
     var node = $(ele).appendTo('#rPaper');
     var width = node.width();
     var height = node.height();

     var centerX = width / 2;
     var centerY = height / 2;

     var startX = x - centerX;
     var startY = y - centerY;

     node.css("left", startX).css("top", startY);

 }

 function drawline(ax, ay, bx, by) {
     console.log('ax: ' + ax);
     console.log('ay: ' + ay);
     console.log('bx: ' + bx);
     console.log('by: ' + by);


     if (ax > bx) {
         bx = ax + bx;
         ax = bx - ax;
         bx = bx - ax;
         by = ay + by;
         ay = by - ay;
         by = by - ay;
     }


     console.log('ax: ' + ax);
     console.log('ay: ' + ay);
     console.log('bx: ' + bx);
     console.log('by: ' + by);

     var angle = Math.atan((ay - by) / (bx - ax));
     console.log('angle: ' + angle);

     angle = (angle * 180 / Math.PI);
     console.log('angle: ' + angle);
     angle = -angle;
     console.log('angle: ' + angle);

     var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
     console.log('length: ' + length);

     var style = ""
     style += "left:" + (ax) + "px;"
     style += "top:" + (ay) + "px;"
     style += "width:" + length + "px;"
     style += "height:1px;"
     style += "background-color:black;"
     style += "position:absolute;"
     style += "transform:rotate(" + angle + "deg);"
     style += "-ms-transform:rotate(" + angle + "deg);"
     style += "transform-origin:0% 0%;"
     style += "-moz-transform:rotate(" + angle + "deg);"
     style += "-moz-transform-origin:0% 0%;"
     style += "-webkit-transform:rotate(" + angle + "deg);"
     style += "-webkit-transform-origin:0% 0%;"
     style += "-o-transform:rotate(" + angle + "deg);"
     style += "-o-transform-origin:0% 0%;"
     style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
     style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
     style += "z-index:99;"
     $("<div style='" + style + "'></div>").appendTo('#rPaper');
 }

демонстрация

// right top -> left bottom
    x1 = 850, y1 = 150,
    x2 = 550, y2 = 250;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

демонстрация

// right bottom -> left top
    x1 = 750, y1 = 150,
    x2 = 550, y2 = 50;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

демонстрация

// left top -> right bottom
    x1 = 150, y1 = 150,
    x2 = 350, y2 = 350;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

демонстрация

// vertical line: down -> up
    x1 = 150, y1 = 350,
    x2 = 150, y2 = 150;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

демонстрация

Поделиться
1

Выделил некоторые строки, используя тег div. См. Ниже код

<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform:   translateY(-20px) translateX(5px) rotate(27deg); position: absolute;/* top: -20px; */"></div>
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(20px) translateX(5px) rotate(-26deg); position: absolute;top: -33px;left: -13px;"></div>

Надеюсь, поможет.

ссылка на скрипку:

http://jsfiddle.net/NATnr/45/

Благодаря,

Сива

Поделиться
0

Вы можете использовать 2D-преобразования CSS3 http://jsfiddle.net/dmRhL/:

.line{
    width: 150px;
    transform: translate(50px,100px) rotate(30deg);
    -ms-transform: translate(50px,100px) rotate(30deg); /* IE 9 */
    -webkit-transform: translate(50px,100px) rotate(30deg); /* Safari and Chrome */
}

Но похоже, что ваша проблема - старые браузеры IE, которые, вероятно, не помогут.

Вы можете попробовать использовать excanvas - JS-библиотеку, которая имитирует элемент canvas с помощью средства визуализации IE VML.

Или некоторые 2D-рамки чертежа, которые будут использовать холст или SVG в зависимости от поддержки браузера. Полный список можно найти по адресу http://en.wikipedia.org/wiki/JavaScript_graphics_library

Поделиться
0

Другие ответы очень лучше, чем это... Это использует PURE CSS, если вам нужно.

<head>
<style>
#i1,#i2,#i3,#i4,#i5,#i6,#i7,#i8{border-right:2px solid black; height:2px;}
#i1{width:30px;}#i2{width:31px;}#i3{width:32px;}#i4{width:33px;}#i5{width:34px;}#i6{width:35px;}#i7{width:36px;}#i8{width:37px;}
</style>
</head>

<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
<div id="i4"></div>
<div id="i5"></div>
<div id="i6"></div>
<div id="i7"></div>
<div id="i8"></div>

И если вам нужно рисовать оси-параллельные линии, вы можете установить ширину или высоту как 1px и увеличить другую. играй здесь.

Поделиться
0

Вы можете создать тег типа p или div, установить ширину, что бы вы ни хотели, добавить верхнюю границу и добавить ее в div, в котором вы хотите создать строку.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню