2

Konva.js を使用してキャンバス アニメーションを実行しています。画像が塗りつぶされた円の形状があり、その形状にカラー オーバーレイ/フィルターを適用したいと考えています (RGBA)。

これは、私が Shape オブジェクトを作成する方法です:

var konvaObject = new Konva.Circle({
    x: 100,
    y: 100,
    radius: 300,
    stroke: this.color,
    strokeWidth: 6,
    fillPatternRepeat: 'no-repeat',
});

// load the image into the shape:
var imageObj = new Image();
imageObj.onload = function () {
    konvaObject.fillPatternImage(imageObj);
    konvaObject.draw();
}
imageObj.src = 'www.demo.com/anImageName.png';

デモ: http://jsbin.com/winugimeme/edit?js,output

Docs は RGBA filter の概要を説明していますが、私が知る限り、それはKonva.Imageアイテムにしか適用できません。

形状オブジェクト/塗りつぶし画像にフィルターを適用できるように、上記のコードを作り直す方法はありますか?

4

1 に答える 1

2

フィルターのドキュメントによると、フィルターを適用する前に形状をキャッシュする必要がありますhttp://konvajs.github.io/api/Konva.Filters.html#RGBA

node.cache();
node.filters([Konva.Filters.RGBA]);
node.blue(120);
node.green(200);
node.alpha(0.3);

注: この例では jsbin デモは機能しません。塗りつぶし画像は CORS を有効にする必要があるためです (同じドメインでホストされているなど)。

于 2016-07-01T01:40:46.120 に答える