Question

如何为一组对象或图层组添加阴影，可以将任何函数添加到类图层

Answer 1

我认为因为阴影与Shape对象相关联会很困难。当然，您可以为所有图层元素设置阴影...或者，我可以做的更好的是获取图层，使用图像执行图像，然后遮蔽此图像。

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

  var rect1 = new Kinetic.Rect({
      x: 20,
      y: 20,
      width: 100,
      height: 50,
      fill: "green",
      stroke: 'black',
      strokeWidth: 2
  });
  var rect2 = new Kinetic.Rect({
      x: 20,
      y: 20,
      width: 50,
      height: 100,
      fill: "blue",
      stroke: 'black',
      strokeWidth: 2
  });

  layer.add(rect1);
  layer.add(rect2);
  stage.add(layer);

  var layerImage = new Image();
  layerImage.src = layer.getCanvas().toDataURL();

  layerImage.onload = function () {
      var layer = new Kinetic.Layer();
      var shadowedImage = new Kinetic.Image({
          image: layerImage,
          shadowColor: 'black',
          shadowBlur: 2,
          shadowOffset: {
              x: 10,
              y: 10
          },
          shadowOpacity: 0.5
      });
      layer.add(shadowedImage);
      stage.add(layer);
  }

kineticjs将阴影添加到组或图层

1 个答案: