對於使用JavaScript

我試圖實現布氏算法線此行布氏算法是我做過什麼：對於使用JavaScript

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

由於某種原因，行不，我按下了確切點我走過去的算法和它看起來很好..我從showCoords得到（）函數的點是好的太..

我知道這是slimier到http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript ，但我想知道我哪裏錯了。 ..

有人知道原因何時該線不直接點擊點？

來源

2017-04-12 user193239

你是不是真的使用Bresenhams算法，但自己的想法。 Bresenhamaölgorithm的要點是它可以與整數一起使用，這比加入浮點數更快更準確。 – Adder

@ user193239，我編輯代碼以獲得更好的瀏覽器兼容性（動態添加事件） – Camille

您需要考慮保證金，邊框和膠印尺寸。

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>

來源

2017-04-12 08:27:08 Camille

對於使用JavaScript

回答

相關問題