使用kineticjs填充图像的非透明部分

Question

我想用kineticjs填充红色的PNG图像。 但是当我尝试应用填充：“红色”时，它会填充图像的透明部分。 我想填充图像的不透明部分。

这就是：

[demo]:http://jsfiddle.net/9wwL2z5L/1/ 

Answer 1

下面是一个使用一个内存HTML5 canvas元素的一种方式。

• 创建画布元件和尺寸到图像尺寸

• 绘制图像到画布

• 集合成为“源在”。这将导致任何新图形只出现在当前不透明的像素上。

• 绘制覆盖整个画布的红色矩形。只有猫内部的像素会变为红色

• 将Kinetic.Image的图像源设置为内存中的画布。

这里的示例代码和演示：

var stage = new Kinetic.Stage({ 
 
      container: 'container', 
 
      width: 578, 
 
      height: 500 
 
     }); 
 
     var layer = new Kinetic.Layer(); 
 

 
     var imageObj = new Image(); 
 
     imageObj.onload = function() { 
 
      
 
      var canvas=document.createElement('canvas'); 
 
      var ctx=canvas.getContext('2d'); 
 
      canvas.width=imageObj.width; 
 
      canvas.height=imageObj.height; 
 
      ctx.drawImage(imageObj,0,0); 
 
      ctx.globalCompositeOperation='source-in'; 
 
      ctx.fillStyle='red'; 
 
     ctx.fillRect(0,0, canvas.width, canvas.height); 
 
      
 
      
 
      var cat = new Kinetic.Image({ 
 
      image: canvas 
 
      }); 
 

 
      // add the shape to the layer 
 
      layer.add(cat); 
 

 
      // add the layer to the stage 
 
      stage.add(layer); 
 
     }; 
 
     imageObj.src = 'http://xiontechnologies.in/images/cat_1.png';

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