Dynamic.js 中具有可拖动图像的复杂剪切边界答案

【问题标题】：complex clipping boundary in kinetic.js with draggable imageDynamic.js 中具有可拖动图像的复杂剪切边界
【发布时间】：2012-12-31 12:54:21
【问题描述】：

查看我基于 html5 的裁剪约束

http://shedlimited.debrucellc.com/test3/canvaskinclip.html

（在 http://jsfiddle.net/aqaP7/4/ 上玩弄 jsfiddle）

因此，在 html5 中，我可以轻松绘制如下形状的边界：

         context.beginPath();
  context.moveTo(5, 5);
  context.lineTo(34, 202);

  context.lineTo(2, 405);
  context.lineTo(212, 385);
  context.lineTo(425, 405);
  context.lineTo(400, 202);
  context.lineTo(415, 10);
  context.lineTo(212, 25);
                context.clip();

不过，在 kinetic.js 中，我看到的所有裁剪选项都是：高度、宽度和 x、y，

我遇到了以下情况：Mask/Clip an Image using a Polygon in KineticJS，但内部/填充图像无法设置为可拖动

请帮忙！

【问题讨论】：

标签： draggable mask kineticjs clipping

【解决方案1】：

在新的 kineticJS 版本中，很多工作都是在后台为您完成的。

看看这个tutorial：

fiddle 让您非常接近，这是代码：

 <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      function draw(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 600,
          height: 700
        });
        var layer = new Kinetic.Layer();

        var patternPentagon = new Kinetic.RegularPolygon({
          x: 220,
          y: stage.getHeight() / 4,
          sides: 5,
          radius: 70,
          fillPatternImage: images.yoda,
          fillPatternOffset: [-220, 70],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });


        patternPentagon.on('dragmove', function() {
        //this.setFillPatternImage(images.yoda);
          //this.setFillPatternOffset(-100, 70);
          var userPos = stage.getUserPosition();
          this.setFillPatternOffset(-userPos.x,-userPos.y);
          layer.draw();
            this.setX(220);
            this.setY(stage.getHeight() / 4);
        });


        layer.add(patternPentagon);

        stage.add(layer);
      }
      var sources = {
        darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };

      loadImages(sources, function(images) {
        draw(images);
      });

    </script>
  </body>

有一种更复杂/更准确的方法可以做到这一点，而无需使其成为背景图案，例如将对象组合在一起

【讨论】：

jsfiddle.net/5hrjE/6 更新。基本上，您需要添加到“组”中的是更多的形状，这会使图像在五边形之外不可见。
jsfiddle.net/5hrjE/7 不是一个很好的解决方案的例子，但你明白了。同样，您需要在前面制作五边形，并在其后面制作图像。然后你可以在五边形上设置 dragmove 来移动图像而不是像jsfiddle.net/5hrjE/6中看到的五边形@
我会把它交给你，谢谢，出于懒惰，我最终放弃了动力学并坚持使用我找到的 HTML5 源，它允许我在shedlimited.debrucellc.com/test4/demo2.html 使用我的 HTML5 边框（尽管这sux，因为 html5 有一些问题等）
谢谢。 KineticJS 相当不错，但由于某种原因，我无法确定图像的剪切区域。