複雜的剪裁邊界

看看我的基於HTML5裁剪約束上複雜的剪裁邊界

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

所以（與上的jsfiddle搞亂http://jsfiddle.net/aqaP7/4/），在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中，我看到的所有剪切選項都是：height，寬度，X，Y，

我碰到下面傳來：Mask/Clip an Image using a Polygon in KineticJS，但內部/填充圖像不能被設置爲可拖動

任何幫助，請！

來源

2013-01-17 IanO.S.

在新的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>

有這樣它不是一個有背景圖案的更復雜的/準確的方法，就像將對象分組在一起

來源

2013-01-17 15:19:04 SoluableNonagon

我會在稍後添加更多 – SoluableNonagon

http://jsfiddle.net/5hrjE/6/更新。基本上，你需要添加到「組」中的是一些更多的形狀，這將使圖像在五邊形之外不可見。 – SoluableNonagon

http://jsfiddle.net/5hrjE/7/一個不是很好的解決方案的例子，但你明白了。再次，您需要將五角形放在前面，並將其背後的圖像。那麼你可以在五角形上設置dragmove來移動圖像而不是像http://jsfiddle.net/5hrjE/6/ – SoluableNonagon

複雜的剪裁邊界

回答

相關問題