kineticjs 应用不止一个过滤器答案

【问题标题】：kineticjs apply more then one filterkineticjs 应用不止一个过滤器
【发布时间】：2013-07-15 13:57:07
【问题描述】：

我正在用 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.

有什么想法吗？

【问题讨论】：

我从未使用过 Kinectic.js，但您肯定是要传递一组过滤器。数组被[]包围。像这样：filter: [Kinetic.Filters.Brighten, Kinetic.Filters.Blur]
感谢 philipp，在发帖之前尝试过，两者都不起作用

标签： html html5-canvas kineticjs

【解决方案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();
};

【讨论】：