KineticJS - 图像上的图案和填充

Posted 2023-03-23

【中文标题】KineticJS - 图像上的图案和填充

【英文标题】：KineticJS - Patterns and Fills on Images

【发布时间】：2013-03-27 11:27:54

【问题描述】：

我有一个用 KineticJS 创建的画布，我正在向该画布添加透明的 PNG 图像。当堆叠在一起时，这会形成一个包含所有不同部分的服装图像。

然后我想做的是让用户点击一个图案，然后用该图案更改该服装的特定部分。所以我需要用该图案填充其中一张图像的不透明部分。我找到了一种不使用 KineticJS 的方法，它看起来像这样：

ctx.globalCompositeOperation = 'source-in';
var ptrn = ctx.createPattern(fabricA, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 375, 260);

我的问题是，有没有办法使用 KineticJS 执行上述相同的步骤？

此外，我确实首先尝试不使用 KineticJS 来执行此操作，但是当我将上述代码应用于图层时，它会填充所有图像，因为它们都在同一图层上。所以我猜我需要更改我的代码以使用多个图层或将图像添加到单个图层中的组中。我的想法在这里吗？对于我要完成的工作，哪个是更好的选择？多层？还是单层上的多个组？

感谢任何人提供的任何帮助。

【参考方案1】：

如果您想进行自定义绘图，请使用 KineticJS 形状对象

这是一个 KineticJS 对象，可让您准确控制其绘制方式。

您使用合成方法创建叠加层。然后将该绘图代码放入一个函数中，并将该函数提供给 Kinetic Shape 的 drawFunc。

这是 Kinetic.Shape 的骨架：

var outfit1 = new Kinetic.Shape(
    drawFunc: function(canvas) 

        // you are passed a canvas to draw your custom shape on
        // so new-up a context and get drawing!
        var context = canvas.getContext();

        context.beginPath();

        // Draw stuff--including your composited overlays
        // You can use any canvas.context drawing commands

    ,
    id:"myCustomOutfit"
);

您可以从这里开始使用示例：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/