使用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>