HTML5 холст линии нарисованы с некоторым смещением - PullRequest
Новая
       27

HTML5 холст линии нарисованы с некоторым смещением

0 голосов
/ 01 марта 2012

У меня проблемы с рисованием линий на холсте с использованием Javascript.

У меня есть страница с холстом и несколькими небольшими элементами: 

<canvas id="myCanvas" width ="500" height="500"></canvas>
<div   id="1111" title ="test div1" style=" position:absolute; left: 10px; top: 30px; z-index:3; width:6px; height:6px; background-color:green"> </div> 
<div   id="2222" title ="test div2" style=" position:absolute; left: 90px; top: 30px; z-index:3; width:6px; height:6px;  background-color:black;"> </div> 
<div   id="3333" title ="test div4" style=" position:absolute; left: 50px; top: 60px; z-index:3; width:6px; height:6px; background-color:blue; "> </div> 
<div   id="4444" title ="test div3" style=" position:absolute; left: 70px; top: 70px; z-index:3; width:6px; height:6px; background-color:yellow;"> </div>

и некоторый код Javascript, который рисует линии от одного div к другому, используя jquery для получения позиции div: 

<script>
var canv = document.getElementById("myCanvas");
var div1 = "1111";
var div2 = "2222";
var div3 = "3333";

var left_1= $("#"+div1).css("left") ;
var top_1= $("#"+div1).css("top") ;
left_1=parseFloat(left_1);
top_1=parseFloat(top_1);

var left_2= $("#"+div2).css("left") ;
var top_2= $("#"+div2).css("top") ;
left_2=parseFloat(left_2);
top_2=parseFloat(top_2);

var left_3= $("#"+ div3).css("left") ;
var top_3= $("#"+ div3).css("top") ;
left_3=parseFloat(left_3);
top_3=parseFloat(top_3);

var cxt=canv.getContext("2d");
cxt.lineWidth=5;
cxt.strokeStyle="#FF0000";

cxt.moveTo(left_1,top_1);
cxt.lineTo(left_2,top_2);
cxt.lineTo(left_3,top_3);

cxt.stroke();

Проблема в том, что нарисованные линии находятся на некотором пикселе далеко от того места, где они должны быть. Я знаю, что левый и верхний атрибуты div представляют верхний левый угол div, поэтому я не понимаю, почему линии рисуются ближе к нижнему правому углу. Самое странное, что это поведение сохраняется в последних версиях Firefox, Safari и Chrome для Mac, но не проверяется с помощью jsfiddle.net:

http://jsfiddle.net/KnmXb/

Вот как должна вести себя страница. Я заметил, что отмена выбора «Нормализованный CSS» в jsfiddle рисует линии точно так же, как это делают safari, firefox и chrome.

Может кто-нибудь сказать мне, если я делаю что-то не так?

1 Ответ

0 голосов
/ 01 марта 2012
  • first: использовать jquery-функцию offset () вместо css ('left') / css ('top')

  • секунда: смещение координат на смещении холста 

    <script> 

var oCanvas = $('#myCanvas').offset();
oCanvas.left-=3; 
oCanvas.top-=3;


var canv = document.getElementById("myCanvas"); 
var div1 = "1111"; 
var div2 = "2222"; 
var div3 = "3333"; 

var o1 = $('#' + div1).offset();
var o2 = $('#' + div2).offset();
var o3 = $('#' + div3).offset();


var cxt=canv.getContext("2d"); 
cxt.lineWidth=5; 
cxt.strokeStyle="#FF0000"; 

cxt.moveTo(o1.left - oCanvas.left,o1.top - oCanvas.top); 
cxt.lineTo(o2.left - oCanvas.left,o2.top - oCanvas.top); 
cxt.lineTo(o3.left - oCanvas.left,o3.top - oCanvas.top); 

cxt.stroke(); 
</script>
...