2017-12-18 212 views
-1

我希望用戶能夠使用線或線連接一組點。連接完成時,點,和已連接,否則如果播放器連接錯誤,則屏幕顯示錯誤的連接。使用線/線連接兩個元素mannualy

+3

向我們展示您迄今爲止所做的以及您卡在哪裏。 –

+0

我是一個初學者,但我可以給你一個像想要設計我的flash例子。 http://vem-iitg.vlabs.ac.in/Magnetic_Field_Behaviour_in_single_coil(experiment1).html像這樣我也想在兩點之間劃一條線。 –

+0

對於Javascript,您必須使用(html5)畫布。看看:[lineTo](https://www.w3schools.com/jsref/canvas_lineto.asp)。 –

回答

0

我可以給一些指針開始。

線描

在節點的選擇,你可以畫線和其他節點上掉落。繼續捕獲節點ID,如果列表中有1,2,6表示其正確或錯誤

function drawLine(x, y) { 
    ctx.beginPath(); 
    ctx.moveTo(startX, startY); 
    ctx.lineTo(x, y); 
    ctx.closePath(); 
    ctx.stroke(); 
    ctx.restore(); 
} 

canvas.onmousedown = function (e) { 
    ctx.save(); 
    e.preventDefault(); 
    e.stopPropagation(); 
    startX = parseInt(e.clientX - offsetX); 
    startY = parseInt(e.clientY - offsetY); 
    isDown = true; 
} 
canvas.onmousemove = function (e) { 
    if (!isDown) { 
     return; 
    } 
    e.preventDefault(); 
    e.stopPropagation(); 
    mouseX = parseInt(e.clientX - offsetX); 
    mouseY = parseInt(e.clientY - offsetY); 
    drawLine(mouseX, mouseY); 
} 
canvas.onmouseup = function (e) { 
    if (!isDown) { 
     return; 
    } 
    e.preventDefault(); 
    e.stopPropagation(); 
    isDown = false; 
}