动力学JS绘图形状和放大和缩小

Question

我想要使用KineticJS在图像顶部绘制不同的形状，并使用不同的按钮放大和缩小，每个元素都能很好地运行itsetlf，但是当我将所有功能组合在一起时页面无效。这里是绘制一条线的脚本：

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

        }); 
       }; 
      }; 

完整的脚本可以在http://jsfiddle.net/MEQxq/查看。我会感谢您的建议，并提前致谢。

Answer 1

我通过在getElementById中移动“if（drawnewline）”来解决问题！同样删除鼠标动作，例如layer.off（'mousemove'）;.