kineticjs - 如何从 KineticJS 中的图像声明之外设置 ShiftHue 过滤器？

Question

在 KineticJS 中，我如何从图像声明之外设置 ShiftHue 过滤器？我可以使用以下代码设置增亮滤镜：

image.setFilter(Kinetic.Filters.Brighten);
image.setFilterBrightness(Math.round(slider.value));

ShiftHue 滤镜怎么样？

Answer 1

只需在 Kinetic 的图像对象上使用过滤器方法
并再次绘制图层

var stage = addStage();
var darth, layer;

var imageObj = new Image();
imageObj.onload = function() {
  layer = new Kinetic.Layer();
  darth = new Kinetic.Image({
    x: 10,
    y: 10,
    image: imageObj,
    draggable: true
  });

  layer.add(darth);
  stage.add(layer);

  darth.cache();
  darth.filters([Kinetic.Filters.HSL]);
  darth.hue(0);
  layer.draw();
};
imageObj.src = 'assets/lion.png';

$('.update-hue').click(function(){
  darth.hue( parseInt($(this).attr('data-hue'), 10) );
  layer.draw();
});