手动使用线/线连接两个元件

问题描述 投票:-2回答:1

我希望用户能够使用电线或线路连接一组点。连接点1,2和6时连接完成,否则如果播放器连接错误,则屏幕显示连接错误。

javascript html5 html5-canvas
1个回答
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;
}
© www.soinside.com 2019 - 2024. All rights reserved.