Drawing 动态JS绘制形状并放大和缩小

Drawing 动态JS绘制形状并放大和缩小,drawing,zooming,kineticjs,Drawing,Zooming,Kineticjs,我尝试使用KineticJS在图像顶部绘制不同的形状,并使用不同的按钮进行放大和缩小,每个元素都可以通过其ETLF很好地工作,但当我在同一页面上组合所有功能时,没有一个可以工作。以下是绘制线条的脚本: if (drawnewline) { document.getElementById('dLine').onclick = function() { layer.on("mousedown", function () {

我尝试使用KineticJS在图像顶部绘制不同的形状,并使用不同的按钮进行放大和缩小,每个元素都可以通过其ETLF很好地工作,但当我在同一页面上组合所有功能时,没有一个可以工作。以下是绘制线条的脚本:

 if (drawnewline) {
            document.getElementById('dLine').onclick = function() {
                    layer.on("mousedown", function () {
                        if (moving) {
                            moving = false;
                            layer.draw();
                        } else {
                            var mousePos = stage.getMousePosition();
                            x1 = mousePos.x;
                            y1 = mousePos.y;
                            line = new Kinetic.Line({
                                points: [0, 0, 50, 50],
                                stroke: "red"
                            });
                            layer.add(line);
                            line.getPoints()[0].x = mousePos.x;
                            line.getPoints()[0].y = mousePos.y;
                            line.getPoints()[1].x = mousePos.x;
                            line.getPoints()[1].y = mousePos.y;
                            moving = true;
                            layer.drawScene();
                        }
                    });

                    layer.on("mousemove", function () {
                        if (moving) {
                            var mousePos = stage.getMousePosition();
                            var x = mousePos.x;
                            var y = mousePos.y;
                            line.getPoints()[1].x = mousePos.x;
                            line.getPoints()[1].y = mousePos.y;
                            moving = true;
                            layer.drawScene();
                        }
                    });

                    layer.on("mouseup", function () {
                        moving = false;
                        var mousePos = stage.getMousePosition();
                        x2 = mousePos.x;
                        y2 = mousePos.y;
                        $("#distance").val(calculateDistance(x1, y1, x2, y2));

                    });
                };
            };

完整的脚本可在上查看。我将感谢您的建议,并提前表示感谢。

我通过在getElementById中移动“if(drawnewline)”解决了这个问题!还可以删除鼠标操作,例如layer.off('mousemove')