FabricJS - 如何在没有背景的情况下偏移图案？

Question

我遇到了一个偏移模式的问题，它用作矩形元素的填充。

基本上，我需要的是拥有一个＆＃34;容器＆＃34;和图像作为图案（或任何其他方式），图像可以旋转，缩放和移动到其容器内。如果图像大于容器，我需要隐藏容器边界以外的任何内容。

我不确定我是否选择了正确的方式来实施此类行为，因此我愿意接受建议。

同时，这就是我所拥有的。 https://jsfiddle.net/redlive/rwdt6rwj/

＆＃13;

＆＃13;

fabric.ImageContainer = fabric.util.createClass(fabric.Rect, {
	type: 'image-container', 
    initialize: function(options) {
        this.callSuper('initialize', options);
        this.set({
            objectCaching: false,
            imageIsLoaded: false
        });
    },
    _drawImage: function(){
        const scaleFactor = 1;
        const imgSrc = [
            'https://picsum.photos/', 
            this.content.width * scaleFactor,
            '/',  
            this.content.height * scaleFactor
        ].join('');

        fabric.Image.fromURL(imgSrc, function(img) {
//            img.scaleToWidth(this.content.width);
            const patternSourceCanvas = new fabric.StaticCanvas();
            patternSourceCanvas.setDimensions({
                  width: this.width,
                  height: this.height
            });
          	patternSourceCanvas.setBackgroundColor('red');
            patternSourceCanvas.add(img);
            patternSourceCanvas.renderAll();
    
            const pattern = new fabric.Pattern({
                source: function() {
                    return patternSourceCanvas.getElement();
                },
                repeat: 'no-repeat',
								offsetX: 20,
              	offsetY: 20
            });

            this.set({
                imageIsLoaded: true,
                fill: pattern
            });

            this.canvas.renderAll();
        }.bind(this));
    },
    _render: function(ctx) {
        this.callSuper('_render', ctx);
    
        if (!this.imageIsLoaded) {
            this._drawImage();
        }    
    }
});

fabric.ImageContainer.fromObject = function(options) {
    return new fabric.ImageContainer(options);
}



// =========================================================================

let store;
const canvas = new fabric.Canvas('paper');

const container = new fabric.ImageContainer({
    left: 10,
    top: 10,
    width: 150,
    height: 150,
    fill: 'red',
    content : {
        left: 100,
        top: 100,
        width: 50,
        height: 50,
        fill: 'blue'
    }
});

canvas.add(container);
canvas.renderAll();

canvas.on("object:modified", function(obj){
	console.log(obj.target);
});
    
  
// =========================================================================  
  
$("#save").on('click', function(){
	store = canvas.toJSON();
  console.log(store);
});
    
$("#restore").on('click', function(){
    canvas.loadFromJSON(store, function(){
        canvas.getObjects().forEach((obj)=>{
            if (obj.type === 'image') {
                obj.ddpLoadImage(obj.imgSrc, obj.sanboxValues);
            }
        });
    	canvas.renderAll();
	});
});
    

＆＃13;

#paper {
  border: solid 1px red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为img：

设置左侧和顶部

img.set({
    left: 10,
    top: 10
});

为模式取消设置offsetX和offsetY：

offsetX: 0,
offsetY: 0

请参阅JSFiddle。