KineticJS -图案和填充图像

KineticJS - Patterns and Fills on Images

本文关键字：填充 图像 KineticJS      更新时间：2023-09-26

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

然后我想做的是允许用户点击一个图案，然后用这个图案改变衣服的特定部分。所以我需要用这种模式填充其中一张图像的非透明部分。我找到了一种不使用KineticJS的方法，它看起来像这样:

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

我的问题是，有没有一种方法可以用KineticJS做上面概述的相同步骤?

此外，我确实首先尝试在不使用KineticJS的情况下做到这一点，但是当我将上述代码应用到图层时，它填充了所有的图像，因为它们都在同一图层上。因此，我猜我需要更改代码以使用多个图层或将图像添加到单个图层中的组中。我的想法对吗?对于我想要实现的目标，哪个是更好的选择?多层?还是在单个图层上使用多个组?

感谢大家的帮助

如果你想做自定义绘图，然后使用KineticJS形状对象

这是一个KineticJS对象，可以让你控制它是如何绘制的。

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

这是Kinetic的骨架。形状:

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/

相关文章：