如何在點擊2張圖片後繪製線條

-1

我是javascript程序員的初學者，我無法將圖像添加到畫布這條線會連接兩個已被點擊的圖像？我很困惑如何根據所需畫布的座標添加圖像？我可以使用函數kineticjs添加圖像並組織座標嗎？請幫我這是一個HTML代碼添加畫布和畫線如何在點擊2張圖片後繪製線條

<html> 
<head> 
<style> 
canvas { 
    border: 1px dashed rgb(200, 200, 200); 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script src = "kinetic-v4.5.4.min.js"></script> 
<script defer = "defer"> 
var clicks = 0; 
var lastClick = [0, 0]; 
document.getElementById('canvas').addEventListener('click', drawLine, false); 
function getCursorPosition(e) { 
    var x; 
    var y; 

    if (e.pageX != undefined && e.pageY != undefined) { 
     x = e.pageX; 
     y = e.pageY; 
    } else { 
     x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    return [x, y]; 
} 

function drawLine(e) { 
    context = this.getContext('2d'); 

    x = getCursorPosition(e)[0] - this.offsetLeft; 
    y = getCursorPosition(e)[1] - this.offsetTop; 

    if (clicks != 1) { 
     clicks++; 
    } else { 

     context.beginPath(); 
     context.moveTo(lastClick[0], lastClick[1]); 
     context.lineTo(x, y, 6); 
     context.strokeStyle = '#000000'; 
     context.stroke(); 
     clicks = 0; 
    } 

    lastClick = [x, y]; 
}; 
</script> 

</body> 
</html>

來源

2014-06-06 PutriKinara

是的，你可以使用KineticJS添加圖像，線條和許多形狀。

您還可以將事件（單擊，雙擊，dragstart，dragmove等）附加到這些形狀並根據其座標執行操作。

看看這個教程關於 Adding an image using KineticJS，和this問題的答案。

來源

2014-06-06 11:32:09 user3632710

謝謝你......我會試試看 – PutriKinara

如何在點擊2張圖片後繪製線條

回答

相關問題