在 KineticJS 中使用多边形蒙版/剪辑图像

Posted 2023-03-05

【中文标题】在 KineticJS 中使用多边形蒙版/剪辑图像

【英文标题】：Mask/Clip an Image using a Polygon in KineticJS

【发布时间】：2012-12-10 11:27:48

【问题描述】：

是否可以在 KineticJS 中使用 Polygon 屏蔽/剪辑 Image？

JSfiddle： http://jsfiddle.net/LNeML/

在 jsfiddle 中，Polygon 应该裁剪 Yoda 的图像。

我在 KineticJS 对象的文档中没有看到任何剪辑功能。我一直在寻找一种简单的方法来剪辑图像，类似于 EaselJS：

star = new createjs.Shape(); 
star.graphics.beginStroke("#FF0").setStrokeStyle(5).drawPolyStar(0,0,50, 15,5,0.6).closePath();
bitmap.mask = star;
stage.addChild(bitmap);

【问题讨论】：

如何使用polygon.setFill 并设置图像填充？ jsfiddle.net/r8rtJ/1

哇，不知道这是可能的，是的，它有效！

【参考方案1】：

好吧，看看你的小提琴，我更新了它：FIDDLE

基本上你需要在你的项目中包含更新版本的 kineticJS，你可以这样做：

  fillPatternImage: ImageObject

作为多边形属性之一。此 fillPatternImage 适用于任何形状并允许您做您想做的事情，但与 EaselJS 的方式不完全相同，不过我想说这很容易。