CODEWITHSUNDEEP
javascriptangularjscanvasfabricjs
Sandor Rozsa
Sandor Rozsa

Reputation: 193

FabricJS v.2 and AngularJS – set canvas background image dynamically

I am using this function to define my fabricJS canvas background image:

$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));
        })
    })
};

All the parameters shoulkd be change on the fly with some html inputs. Setting the repeat is working fine and i can change it dynamically.

But I am simply not able to change the scale of my background image. Using the above function I would expect that my background image would be:

would be not repeated (ok. is working) positioned in the middle/center of my canvas (it is not) would be scaled by a factor of 10 (it is not)

I am making again a newbish mistake? Or ist this realted to some changes in image handling in FabricJS v.2

Upvotes: 0

Views: 656

Answers (1)

Durga
Durga

Reputation: 15604

canvas.setBackgroundImage() Use this function to add Image as a background.

To get Height/Width of canvas use canvas.getHeight()/canvas.getWidth(),these are functions. Or else you can use the properties > canvas.height/canvas.width respectively.

DEMO

// 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>

Upvotes: 1

Related Questions