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

Question

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

这是：

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

Answer 1

这是使用内存中html5 canvas元素的一种方法。

• 创建一个canvas元素并将其调整为图像大小

• 将图像绘制到画布上

• 将合成设置为'source-in'。这将导致任何新图形仅出现在当前不透明的像素上。

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

• 将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>