Question

我遇到了canvas的问题。

我想使用kinetic来使用移动事件（尤其是可拖动的事件），我还希望同时使用clip()功能。

这是我的代码：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="kinetic-v3.9.4.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 708,
          height: 500
        });
        var layer = new Kinetic.Layer();

        var circle1 = new Kinetic.Circle({
          x: 150,
          y: 150,
          radius: 75,
          fill: "red",
          draggable: true
        });

        var circle2 = new Kinetic.Circle({
          x: 350,
          y: 150,
          radius: 75,
          fill: "blue",
        });

        layer.add(circle2);
        layer.add(circle1);
        stage.add(layer);
      };

    </script>
  </head>
  <body onmousedown="return false;">
    <div id="container"></div>
  </body>
</html>

我的第一个圆圈是可拖动的，但我想使用它和clip function，但我真的不知道怎么做。另外，我试图得到像这样的2d上下文：

var context = this.getContext();

但它没有用。如果有人可以帮助我，谢谢。

我也看到了这个example，但它不适用于移动设备。

Answer 1

您提到的example无法在移动设备上运行的原因是因为它仅使用鼠标事件处理程序：

stage.on("mousemove", function(){})

但是你需要添加这样的触摸事件：

stage.on("mousemove touchmove", function(){})

touchstart，touchmove，touchend

祝你好运！

Canvas可以使用kineticJS和Clip功能进行拖动

1 个答案: