Question

我正在尝试使用kineticjs在透明层上应用图案（即图像）。但是它应用了像square一样的图案。它不应该是正方形，它应该与顶层合并，因为顶层有阴影效果这是我的代码，如何完成它。

<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="kinetic-v5.1.0.min.js"></script>

var bottom_left_mask=new Image();
var pattern=new Image();
bottom_left_mask.src="cuffR.png";
pattern.src="Sea-blue.png";
bottom_left_mask.onload = pattern.onload = loader;

  function loader(){
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 362,
      height: 814
    });

  var layer = new Kinetic.Layer();
  var yoda = new Kinetic.Image({
      x: 0,
      y: 0,
      image: main_img,
      width: 362,
      height: 814
  });

  layer.add(yoda);
  stage.add(layer);

  var topLeftHand=new Kinetic.Image({
      x: 35,
      y: 424,
      image: bottom_left_mask,
      width: 26,
      height: 25,
      id:'ss'
  });

  layer.add(topLeftHand);
  stage.add(layer);

    //body layer

    var bodyLayer=new Kinetic.Image({
      x: 53,
      y: 50,
      image: body_mask,
      width: 243,
      height: 725,
      id:'ss'
    });



    layer.add(bodyLayer);
    stage.add(layer);

    bodyLayer.on('click',function(e){



      this.fillPatternImage(pattern);
      this.fillPatternOffset({x:0, y:0});
      layer.draw();

      this.getContext()._context.globalCompositeOperation = "source-atop";
      layer.getContext()._context.globalCompositeOperation = "destination-atop";

      layer.add(bodyLayer);
      stage.add(layer);

    });

}

这是截图（我的结果）：http://i.stack.imgur.com/u3wWx.png

期待结果是likethis：http://i.stack.imgur.com/0oFGU.png

如何在kineticjs的透明层上应用图案？

0 个答案: