负偏移在fabric.js中的模式

时间:2017-11-21 01:45:27

标签: javascript fabricjs

想要使用随缩放比例缩放的网格图像模式。一旦缩放,网格重新对齐到左上角并使网格不对齐。为了解决这个问题,我想将布料图像模式与负偏移对齐。目前,负偏移不会改变模式的偏移。也许有另一种方法可以解决这个问题,但不包括负偏移。



var canvas = new fabric.Canvas('canvas1', {
  backgroundColor : "#FDF5E2"
})

canvas.setDimensions({
  width: window.innerWidth, 
  height: window.innerHeight
});

const zoom = 1.4

fabric.Image.fromURL('https://i.imgur.com/e2BzQYC.png', (img) => {
	img.scaleToWidth(25*zoom);

	let patternSourceCanvas = new fabric.StaticCanvas();
	patternSourceCanvas.add(img);
	patternSourceCanvas.renderAll();
	let pattern = new fabric.Pattern({
		source: () => {
			patternSourceCanvas.setDimensions({
				width: img.getScaledWidth(),
				height: img.getScaledHeight()
			});
			patternSourceCanvas.renderAll();
			return patternSourceCanvas.getElement();
		},
		repeat: 'repeat',
		offsetX: -12,
		offsetY: -12
	}); 

  canvas.setBackgroundColor(pattern, () => { canvas.renderAll(); })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-beta.7/fabric.js"></script>
<canvas id="canvas1"></canvas>
&#13;
&#13;
&#13;

0 个答案:

没有答案