Clever Geek Handbook

Scaling an image from center (fabricjs)

I am trying to scale an image using a parameter centeredScaling: true

when setting up an Image instance. I have a Circle object that is an "on" slider that should be a scale.

Here's an example: http://jsfiddle.net/hellatan/tk1qs8ty/

A couple of things: 1. it doesn't scale from the center 2. The starting point of the Circle object doesn't correlate correctly scaling the image properly (I guess I'll have to tweak some math for this though)

Does anyone have any hints as to what I am doing wrong (mainly # 1, # 2 would be a bonus to know too).

Ignore the sloppiness of the code =)

+3


source to share


2 answers


Try to set the origin for x and y to center and adjust the origin x and y of the image



imgInstance.set({
        scaleY: imgH / origH,
        scaleX: imgW / origW,
        originX: "center", 
        originY: "center"
    });
+6


source


The first step is to add scale after calling the center of the image. And then the scale will have a center:



imgInstance.scale(my_value).center().setCoords()
+1


source






More articles:


All Articles