0
Fabric JSで画像のフレームを構築する必要があります。このフレームは、画像の任意のサイズに合わせて動的に構築する必要があります。 は、私は2枚の画像を使用してこれを行うには：ぼかしを入れずに閉じたオブジェクトが、FabricJSで互いにスペースを持つ理由
用の画像私はそれをしないアルゴリズムを開発したと、それは動作します - 側
JSフィドルhttps://jsfiddle.net/Eugene_Ilyin/gzjxhLtm/9/
var sideObj = new fabric.Rect(),
frameSideTopImage = new fabric.Image(new Image(), {type: 'image'}),
frameCornerTLImage = new fabric.Image(new Image(), {type: 'image'}),
imageSize = 172,// Size of the image (width = height).
leftOffset = 100,
topOffset = 100;
// Load image for corner.
fabric.util.loadImage('http://i.imgur.com/w41HYN3.png', function (img) {
// Set image and options for top left corner.
frameCornerTLImage.setElement(img);
frameCornerTLImage.setOptions({ \t
\t strokeWidth: 0,
left: leftOffset,
top: topOffset
});
// Load image for side.
fabric.util.loadImage('http://i.imgur.com/3VqKv1O.png', function (img) {
\t frameSideTopImage.setElement(img);
// Create canvas for pattern.
var canvasForFill = new fabric.StaticCanvas(fabric.util.createCanvasElement(), {enableRetinaScaling: false});
canvasForFill.add(frameSideTopImage);
\t \t // Configure top side for the frame.
sideObj.setOptions({
\t strokeWidth: 0,
objectCaching: false,
originX: 'left',
originY: 'top',
left: imageSize + 100,
top: 100,
width: 800,
height: imageSize,
fill: new fabric.Pattern({
source: function() {
canvasForFill.setDimensions({
width: imageSize,
height: imageSize
});
return canvasForFill.getElement();
},
repeat: 'repeat-x'
})
});
var canvas = new fabric.Canvas('c');
var frame = new fabric.Group([sideObj, frameCornerTLImage], {
strokeWidth: 0,
width: 800 * 3,
height: imageSize * 3,
scaleX: 1/3,
scaleY: 1/3,
}
);
canvas.add(frame);
canvas.renderAll();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.js"></script>
<body>
<canvas id="c" width="1000" height="1000"></canvas>
</body>
ありがとうございます。私はすでにそれを試みましたが、私の場合は助けになりません。 申し訳ありませんが、すべての条件を再現しているわけではありません。さて、私は最初のメッセージを更新しました。私はスケーリングを使用し、問題は再現されます。それを確認できますか？多分あなたは解決策を知っていますか？前もって感謝します。 – Eugene