0

我有一个问题要处理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();

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

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

4

1 回答 1

4

您提到的示例不适用于移动设备的原因是它仅使用鼠标事件处理程序：

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

但是您需要像这样添加触摸事件：

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

touchstart, touchmove, touchend

祝你好运！

于 2012-05-11T14:50:24.303 回答