Question

我正在html5中构建一个画布并遵循这些教程：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-blur-filter-tutorial/ http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-brighten-or-darken-image-tutorial/

现在，如果我想在图像上应用这两个过滤器，那可能吗？我想让我的用户改变图片的模糊和亮度，所以我想出了：

var Themex = new Kinetic.Image({
  x: 0,
  y: 0,
  name: "BG_image",
  image: imageBG,
  width: stage.getWidth(),
  height: stage.getHeight(),
  filter: {
    Kinetic.Filters.Brighten,
    Kinetic.Filters.Blur
  },
  filterBrightness: 0,
  filterRadius: 20
});

但是我收到了一个javascript错误：过滤器上的“Uncaught SyntaxError：Unexpected identifier”：{row。

任何想法？

Answer 1

好如果有人需要 - 实际上没有必要输入任何过滤器。可以一次附加任何过滤器 - 就像那样，使用setFilter函数

var slider = document.getElementById('slider');

slider.onchange = function() {
  Themex.setFilter(Kinetic.Filters.Brighten);
  Themex.setFilterBrightness(Math.round(slider.value));
  BGlayer.batchDraw();
};

var sliderBlur = document.getElementById('blurSlider');

sliderBlur.onchange = function() {
  Themex.setFilter(Kinetic.Filters.Blur);
  Themex.setFilterRadius(Math.round(sliderBlur.value));
  BGlayer.batchDraw();
};

var Grayscale_But = document.getElementById('Grayscale_But');

Grayscale_But.onclick = function() {
  Themex.setFilter(Kinetic.Filters.Grayscale);
  Themex.setFilterRadius(Math.round(20));
  BGlayer.batchDraw();
};

kineticjs应用多个过滤器

1 个答案: