javascript - 如何为 Canvas 上动态添加的形状添加动态标签？

问题描述

我正在尝试创建一个自由形式的绘图工具，它允许绘制一个形状（矩形/三角形/线）并为每个绘制的形状添加唯一的标签。我在这里得到了自由格式的绘图工具代码：https ://jsfiddle.net/k70m5qvh/ 。代码：

<html>
        <script type="text/javascript">
        var canvas, ctx, flag = false,
            prevX = 0,
            currX = 0,
            prevY = 0,
            currY = 0,
            dot_flag = false;

        var x = "black",
            y = 2;
        
        function init() {
            canvas = document.getElementById('can');
            ctx = canvas.getContext("2d");
            w = canvas.width;
            h = canvas.height;
        
            canvas.addEventListener("mousemove", function (e) {
                findxy('move', e)
            }, false);
            canvas.addEventListener("mousedown", function (e) {
                findxy('down', e)
            }, false);
            canvas.addEventListener("mouseup", function (e) {
                findxy('up', e)
            }, false);
            canvas.addEventListener("mouseout", function (e) {
                findxy('out', e)
            }, false);
        }
        
        function color(obj) {
            switch (obj.id) {
                case "black":
                    x = "black";
                    break;
                case "white":
                    x = "white";
                    break;
            }
            if (x == "white") y = 14;
            else y = 2;
        
        }
        
        function draw() {
            ctx.beginPath();
            ctx.moveTo(prevX, prevY);
            ctx.lineTo(currX, currY);
            ctx.strokeStyle = x;
            ctx.lineWidth = y;
            ctx.stroke();
            
            //clear background
            
            ctx.closePath();
        }
        
        function erase() {
            var m = confirm("Want to clear");
            if (m) {
                ctx.clearRect(0, 0, w, h);
                document.getElementById("canvasimg").style.display = "none";
            }
        }
        
        function findxy(res, e) {
            if (res == 'down') {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
        
                flag = true;
                dot_flag = true;
                if (dot_flag) {
                    ctx.beginPath();
                    ctx.fillStyle = x;
                    ctx.fillRect(currX, currY, 2, 2);
                    ctx.closePath();
                    dot_flag = false;
                }
            }
            if (res == 'up' || res == "out") {
                flag = false;
            }
            if (res == 'move') {
                if (flag) {
                    prevX = currX;
                    prevY = currY;
                    currX = e.clientX - canvas.offsetLeft;
                    currY = e.clientY - canvas.offsetTop;
                    draw();
                }
            }
        }
        </script>
        <body onload="init()">
            <style>
                .eraser {
                  cursor: cell;
                }
            </style>
            <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:1px solid black;"></canvas>
            <div style="position:absolute;top:17%;left:67%;width: 40px; height:15px;border: 1px solid black; padding: 10px 5px;" id="black" onclick="color(this)">Draw</div>
            <div style="position:absolute;top:37%;left:67%;width: 40px; height:15px;border: 1px solid black; padding: 10px 5px;" id="white" class="eraser" onclick="color(this)">Erase</div>
            <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
        </body>
    </html>

但是第二部分需要一个解决方案，即为绘制的对象添加动态标签。

有没有人有在画布上为动态添加的自由形状添加动态标签的经验？感谢帮助！

标签： javascripthtmlcanvas

javascript - 如何为 Canvas 上动态添加的形状添加动态标签？

问题描述

解决方案

推荐阅读