使用javascript的线的bresenham算法答案

【问题标题】：bresenham algorithm for a line using javascript使用javascript的线的bresenham算法
【发布时间】：2017-04-12 07:57:09
【问题描述】：

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

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

由于某种原因，这条线不在我按下的确切位置我检查了算法，它看起来不错..我从 showCoords() 函数中得到的点也很好..

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

有没有人知道有时这条线不直到点击点的原因？

【问题讨论】：

你不是真的在使用 Bresenhams 算法，而是你自己的想法。 Bresenham aölgorithm 的要点在于它适用于整数，这比添加浮点数更快、更精确。
@user193239，我编辑代码以获得更好的浏览器兼容性（动态添加事件）

标签： javascript html algorithm

【解决方案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;
    }
}

&lt;canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;

【讨论】：