Question

我已经研究了许多论坛和教程，以找到将不同形状的蒙版应用于矩形的想法或解决方案，其中填充了Kinecticjs中的图像obj。但我尝试了不同的方法但未能达到最终输出。

例如：请从这里获取图像 http://postimg.org/image/5czqujzxb/

有人对此有所了解吗？感谢您提前分享知识和解决方案。

Answer 1

KineticJS内置支持矩形剪裁，但不支持剪切到路径（如心脏）。

相反，你可以创建一个自定义的Kinetic.Shape并使用合成来用你的模式填充你的心脏面具。

由于KineticJS没有内置合成，诀窍是获得对KineticJS用于绘制的实际html5画布上下文的引用：

var maskedShape = new Kinetic.Shape({
  x: 20,
  y: 20,
  drawFunc: function(context) {

    // ctx is the actual html5 context used by this shape
    var ctx=context.canvas._canvas.getContext('2d');

  }
});

然后你就可以使用html5环境＆＃39; source-in＆＃39;合成以限制您的模式仅绘制到心脏面具：

ctx.drawImage(heartMaskImage,0,0);
ctx.globalCompositeOperation='source-in';
ctx.drawImage(patternImage,0,0);

这是一个演示：

＆＃13;

var stage = new Kinetic.Stage({
  container: 'container',
  width: 450,
  height: 450
});
var layer = new Kinetic.Layer();
stage.add(layer);

// put the paths to your images in imageURLs[]
var imageURLs=[];  
// push all your image urls!
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/mask1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/pattern1.jpg");

// the loaded images will be placed in images[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
  for (var i=0; i<imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length ) {
        callback();
      }
    };
    img.onerror=function(){alert("image load failed");} 
    img.crossOrigin="anonymous";
    img.src = imageURLs[i];
  }      
}

function start(){

  // the imgs[] array now holds fully loaded images
  // the imgs[] are in the same order as imageURLs[]

  var maskedShape = new Kinetic.Shape({
    x: 20,
    y: 20,
    drawFunc: function(context) {
      var ctx=context.canvas._canvas.getContext('2d');
      ctx.save();
      ctx.drawImage(imgs[0],0,0);
      ctx.globalCompositeOperation='source-in';
      ctx.drawImage(imgs[1],0,0);
      ctx.restore();
    }
  });
  layer.add(maskedShape);
  layer.draw();

}

＆＃13;

body{padding:20px;}
#container{
	border:solid 1px #ccc;
  margin-top: 10px;
  width:450px;
  height:450px;
}

＆＃13;

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<div id="container"></div>

＆＃13;

如何将蒙版应用于填充kineticjs中的图像对象的矩形

1 个答案: