Question

我正在使用此功能来定义fabricJS画布背景图像：

$scope.bgImage = function () {
    const {
        ipcRenderer
    } = require('electron')
    ipcRenderer.send('openFile', () => {
    })
    ipcRenderer.once('fileData', (event, filepath) => {
        fabric.Image.fromURL(filepath, function (image) {
            var hCent = canvas.getHeight / 2;
            var wCent = canvas.getWidth / 2;
            canvas.setBackgroundColor({
                source: filepath,
                top: hCent,
                left: wCent,
                originX: 'center',
                originY: 'middle',
                repeat: 'no-repeat',
                scaleX: 10,
                scaleY: 10 
            }, canvas.renderAll.bind(canvas));
        })
    })
};

所有参数都应该随时改变一些html输入。设置重复工作正常，我可以动态更改它。

但我根本无法改变背景图像的比例。使用上面的函数我希望我的背景图像是：

不会重复（好的。正在工作）位于我的画布的中间/中心（它不是）将缩放10倍（不是）

我又犯了一个新的错误？或者这适用于FabricJS v.2中图像处理的一些变化

Answer 1

canvas.setBackgroundImage()使用此功能将图像添加为背景。

要获得画布的高度/宽度，请使用canvas.getHeight()/canvas.getWidth()，这些是函数。或者你可以使用属性＆gt;分别为canvas.height/canvas.width。

<强>样本

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
var hCent = canvas.getHeight() / 2;
var wCent = canvas.getWidth() / 2;
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
  originX: 'center',
  originY: 'center',
  left: wCent,
  top: hCent,
  scaleX: 1,
  scaleY: 1
});

fabric.util.addListener(document.getElementById('toggle-scaleX'), 'click', function () {
    if (!canvas.backgroundImage) return;

    canvas.backgroundImage.scaleX = canvas.backgroundImage.scaleX < 1 ? 1 : fabric.util.toFixed(Math.random(), 2);
    canvas.renderAll();
});
fabric.util.addListener(document.getElementById('toggle-scaleY'), 'click', function () {
    if (!canvas.backgroundImage) return;

    canvas.backgroundImage.scaleY = canvas.backgroundImage.scaleY < 1 ? 1 : fabric.util.toFixed(Math.random(), 2);
    canvas.renderAll();
});

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

<button id="toggle-scaleX">Toggle scaleX</button>
<button id="toggle-scaleY">Toggle scaleY</button>

FabricJS v.2和AngularJS - 动态设置画布背景图像

1 个答案: