用Javascript在棋盘上绘制箭头

Drawing arrows on a chess board in Javascript

本文关键字：绘制 Javascript      更新时间：2023-09-26

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

我希望能够从一个方块

到另一个方块绘制箭头以显示攻击线和影响线，但不知道如何做到这一点。我的看板由<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，因为我不想下载额外的文件或必须在互联网上才能使用该程序。

因此，

经过一个月的修补，我终于找到了解决方案。尽管我付出了很多努力来使用div> 标签和图像来解决这个问题<但我永远无法让箭头在旋转时正确定位。因此，我重新尝试了><画布>标签，我终于找到了有效的解决方案。

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();
        }

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

如果你问如何处理这个(有趣的(问题，我会这样说。

    用 2 个
  1. png 制作箭头：2 个带有背景图像的 divs(正文(和箭头的点(在一个容器div 内。
  2. 获得正确显示箭头的代码后，请确保您知道如何使用 JavaScript 将其附加到DOM。
  3. 现在尝试使用 javascript 使箭头越来越短(通过更改包含箭头主体的div的大小(
  4. 一旦你能做到这一点，就该进行数学了。 使用 javascript 来计算在以下情况下首先单击的DIV的坐标制作箭头，然后单击第二个DIV。当你有这些坐标，计算(使用毕达哥拉斯(的长度您需要的箭头，以及您需要的旋转堆(这是棘手的部分，但我以前做过，所以当然可以做到如果你知道一些基本的数学(。你实际上是在板上创建三角形。
  5. 通过坐标，长度和旋转，您现在可以放置您的箭头，调整长度和旋转，以按照您需要的方式显示它。请记住，您也可以将箭头表示 350 度达到 -10 度。

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

顺便说一下，这个问题当然可以用普通的JS来解决，但是使用jQuery会让它更容易，更少的工作。您还可以通过下载库来离线使用 jQuery。

为了激活和禁用指针事件，我使用了这段代码。

检查是否按下了 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";
    }
相关文章：