帶有動力學JS和剪輯功能的畫布可拖動

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

但這沒有用。 如果有人可以幫助我，謝謝。

我也看到了這個示例，但不適用於移動設備。

Answer 1

您提到的示例在移動設備上不起作用的原因是，它僅使用鼠標事件處理程序：

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

但您需要添加如下觸摸事件：

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

touchstart，touchmove，touchend

祝好運！

帶有動力學JS和剪輯功能的畫布可拖動

問題描述

1 個解決方案

解決方案1
4 2012-05-11 14:50:24

帶有動力學JS和剪輯功能的畫布可拖動

問題描述

1 個解決方案

解決方案1 4 2012-05-11 14:50:24

解決方案1
4 2012-05-11 14:50:24