要使用滤镜在Konva.Image我们必须首先使用cache（）函数然后使用滤镜在filter（）函数。

要使用Konva反转图像的灰度，我们可以使用 Konva.Filters.Grayscale滤镜。

查看所有可用的滤镜，请查看滤镜文档。

Konva Grayscale Image Demo 点击查看

 <!DOCTYPE html>
 <html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Grayscale Image Demo</title>
<style>
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function loadImages(sources, callback) {
  var images = {};
  var loadedImages = 0;
  var numImages = 0;
  for(var src in sources) {
    numImages++;
  }
  for(var src in sources) {
    images[src] = new Image();
    images[src].onload = function() {
      if(++loadedImages >= numImages) {
        callback(images);
      }
    };
    images[src].src = sources[src];
  }
}
function buildStage(images) {
  var stage = new Konva.Stage({
    container: 'container',
    width: 300,
    height: 200
  });
  var layer = new Konva.Layer();
  var lion = new Konva.Image({
    image: images.lion,
    x: 80,
    y: 30,
    draggable: true
  });
  lion.cache();
  lion.filters([Konva.Filters.Grayscale]);
  layer.add(lion);
  stage.add(layer);
}
var sources = {
  lion: '/assets/lion.png'
};
loadImages(sources, buildStage);
</script>
</body>
</html>

灰度

results matching ""

No results matching ""