Question

我正在尝试制作自己的国际象棋分析板，以便在教国际象棋时使用。我目前拥有电路板，可以拖放的部件，以及清理电路板和设置不同电路板位置的方法。我也可以点击方块来突出显示它们。

我希望能够从一个方格到另一个方格绘制箭头以显示攻击和影响线，但不知道如何实现这一点。我的主板由<div>标签组成。下面是一个简短的例子（为了简洁起见，伪代码和实际代码）。

//几种CSS样式，用于定义正方形的宽度，高度和颜色 CSS样式类“黑暗方块” CSS样式类“浅色方块”

//我的电路板由<div>标签

组成

<div id="board">
    <div id="a1" class="lightsquare"></div>
    <div id="a2" class="darksquare"></div>
    <div id="a3" class="lightsquare"></div>
    //second rank
    <div id="b1" class="darksquare"></div>
    <div id="b2" class="lightsquare"></div>
    <div id="b3" class="darksquare"></div>

    //third rank
    <div id="c1" class="lightsquare"></div>
    <div id="c2" class="darksquare"></div>
    <div id="c3" class="lightsquare"></div>
</div>

我可以将棋子放在棋盘上，移动它们，拿走其他棋子，清理棋盘，设置独特的位置，并突出显示各个方块，但也希望能够让用户点击，拖动，并在棋盘上画出箭头，同时仍能操纵棋盘上的棋子。

我看过使用标签，但根据我的阅读和研究，<canvas>标签看起来并不像我想要的那样。

有没有人对如何在JavaScript中执行此操作有任何想法？我还没有学会使用JQuery，并且宁愿避免使用JQuery，因为我不想下载额外的文件或者必须在互联网上使用这个程序。

Answer 1

经过一个月的修修补补，我终于找到了解决方案。尽可能多的努力使用＆lt; div>标签和图像来解决这个问题，旋转时我永远无法正确定位箭头。因此，我回去尝试＆lt;帆布＆gt;标签，我终于找到了一个有效的解决方案。

function drawArrow(fromx, fromy, tox, toy){
            //variables to be used when creating the arrow
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var headlen = 10;

            var angle = Math.atan2(toy-fromy,tox-fromx);

            //starting path of the arrow from the start square to the end square and drawing the stroke
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.strokeStyle = "#cc0000";
            ctx.lineWidth = 22;
            ctx.stroke();

            //starting a new path from the head of the arrow to one of the sides of the point
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

            //path from the side point of the arrow, to the other side point
            ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),toy-headlen*Math.sin(angle+Math.PI/7));

            //path from the side point back to the tip of the arrow, and then again to the opposite side point
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

            //draws the paths created above
            ctx.strokeStyle = "#cc0000";
            ctx.lineWidth = 22;
            ctx.stroke();
            ctx.fillStyle = "#cc0000";
            ctx.fill();
        }

此代码将根据鼠标按下和鼠标按下事件的方块坐标获取其开始和结束坐标。然后，它将使用这些坐标来确定如何使用正确的旋转绘制箭头。

Answer 2

如果你问如何处理这个（有趣的）问题，我会这样做。

用2个pngs制作你的箭头：2 divs带有背景图像（正文和一个容器div内的箭头点。
一旦有了正确显示箭头的代码，请确保您知道如何使用javascript将其附加到DOM。
现在尝试使用javascript使箭头越来越短（by 更改包含箭头主体的div的大小）
一旦你能做到这一点，那就是数学的时间。使用javascript来计算首先点击的DIV的坐标制作箭头，然后点击第二个DIV。当你有这些坐标，计算（使用毕达哥拉斯）的长度你需要的箭头，以及你需要的旋转声音（这就是棘手的部分，但我之前已经做过，所以它当然可以完成如果你知道一些基本的数学）。你实际上是在棋盘上创建三角形。
使用坐标，长度和旋转，您现在可以放置您的在棋盘上的箭头，调整长度和旋转，到以您需要的方式显示它。并记得你也可以转箭头表示350度达到-10度。

这绝对不容易，但如果你喜欢数学，考虑国际象棋，我想你会这很有趣。

顺便说一句，这个问题当然可以通过普通的JS来解决，但是使用jQuery可以减轻工作量。您也可以通过下载库来离线使用jQuery。

Answer 3

要激活和禁用我使用此代码的pointerEvents。

//检查是否按下了shift键

    function disableImage(ev){
        if(ev.shiftKey == 1){
            var canvas = document.getElementById("arrowCanvas");
            canvas.style.pointerEvents = "all";
        }
    }

    function enableImage(){
        var canvas = document.getElementById("arrowCanvas");
        canvas.style.pointerEvents = "none";
    }

在Javascript的棋盘的图画箭头

3 个答案: