使用javascript的一条线的bresenham算法

Question

我正在尝试为一条线实现bresenham算法，这是我所做的：

https://jsfiddle.net/noatendler/u2vnz5La/1/

由于某些原因，该行不在我按下的确切点上，所以我检查了算法，它看起来很好..从showCoords（）函数获得的点也可以。

我知道这比http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript更苗条，但我想了解我哪里出了错...

有谁知道有时线不直达点击点的原因吗？

Answer 1

您需要考虑边距，边框和胶印尺寸。

 var c = document.getElementById("myCanvas"); // Add click event dynamically for browser compatibility c.addEventListener('click',showCoords); var ctx = c.getContext("2d"); ctx.fillStyle = "blue"; var x1, y1, x2, y2; var isFirst = 0; function getRealPosX(clientX) { // If border, remove it if (c.style['border-left-width']) { // As border size have 'px' at the end, remove non-numeric clientX -= parseInt(c.style['border-left-width'].replace(/[^0-9\\.]/g, ''), 10); } // If margin, remove it if (c.style.marginLeft) { // As margin size have 'px' at the end, remove non-numeric clientX -= parseInt(c.style.marginLeft.replace(/[^0-9\\.]/g, ''), 10); } // If offset, remove it if (c.offsetLeft) { clientX -= c.offsetLeft ; } return clientX; } function getRealPosY(clientY) { if (c.style['border-top-width']) { clientY -= parseInt(c.style['border-top-width'].replace(/[^0-9\\.]/g, ''), 10); } if (c.style.marginTop) { clientY -= parseInt(c.style.marginTop.replace(/[^0-9\\.]/g, ''), 10); } if (c.offsetTop) { clientY -= c.offsetTop } return clientY; } function showCoords(event) { //if it is the first click save it x1,y1 if (isFirst == 0) { x1 = getRealPosX(event.clientX); y1 = getRealPosY(event.clientY); isFirst = 1; } //if it is the second click save x2, y2 else { x2 = getRealPosX(event.clientX); y2 = getRealPosY(event.clientY); //console.log("x1:" + x1 + " y1:" + y1); //console.log("x2:" + x2 + " y2:" + y2); Drawme(x1, y1, x2, y2); //x1=0; x2=0; y1=0; y2=0; isFirst = 0; //set it as 0 so the next click would be x1, y1 } } function Drawme(x1, y1, x2, y2) { // if it is the same point if (x1 == x2 && y1 == y2) { ctx.fillRect(x1, y1, 1, 1); return; } var dx = x2 - x1; var dy = y2 - y1; var steps = Math.max(Math.abs(dx), Math.abs(dy)); var Xincrement = dx / steps; var Yincrement = dy / steps; //console.log("Xincrement:" + Xincrement + " Yincrement:" + Yincrement); var x = x1, y = y1; for (var v = 0; v < Math.round(steps); v++) { ctx.fillRect(x, y, 1, 1); x = x + Xincrement; y = y + Yincrement; } } 

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