如何在KineticJS中从Image声明外部设置ShiftHue滤波器？

Question

在KineticJS中，如何从Image声明外部设置ShiftHue滤镜？ 我可以使用以下代码设置Brighten过滤器：

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();
});