kineticjs - KineticJSのImage宣言の外からShiftHueフィルタを設定するには?

Question

KineticJS で、Image 宣言の外から ShiftHue フィルターを設定するにはどうすればよいですか? 次のコードを使用して Brighten フィルターを設定できます。

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

ShiftHueフィルターはどうですか？

Answer 1

キネティックの画像オブジェクト
でフィルターメソッドを使用して、レイヤーを再度描画するだけです

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