多角形を斑点または縞模様のパターンで塗りつぶしたい。画像をパターンとして使用している例はたくさんありますが、他の形状や多角形は使用していません
またhttp://fabricjs.com/dynamic-patterns/では、パターンの角度を調整すると、画像/キャンバスの左上隅から調整されます..キャンバスの中心から行う方法は何でも(パグは中心を中心に回転し、途切れることはありません)
多角形を斑点または縞模様のパターンで塗りつぶしたい。画像をパターンとして使用している例はたくさんありますが、他の形状や多角形は使用していません
またhttp://fabricjs.com/dynamic-patterns/では、パターンの角度を調整すると、画像/キャンバスの左上隅から調整されます..キャンバスの中心から行う方法は何でも(パグは中心を中心に回転し、途切れることはありません)
画像をパターンとして使用している例はたくさんありますが、他の形状やポリゴンは使用していません。
同じ動的パターン demoを使用すると、以下を置き換えるだけです。
patternSourceCanvas.add(img);
と:
patternSourceCanvas.add(yourShape);
..キャンバスの寸法が適切であることを確認します。ご覧のとおり、Fabric はメモリ内のキャンバス全体を使用してパターンをレンダリングできるため、そのキャンバスに追加したもの (SVG 形状や単純な形状などを含む) はすべてパターンとして使用されます。
..パターンの角度を調整すると、画像/キャンバスの左上隅から調整されます
originX/originY を「center」に変更すると、パグの画像が中心を中心に回転するはずです。
img.scaleToWidth(100).set({
originX: 'center',
originY: 'center'
});