CODEWITHSUNDEEP
javascriptcanvasfabricjs
Darren Zou
Darren Zou

Reputation: 143

How to get the center coordinates for current view in Fabric.js?

I am working on a image loading system and for it to work on mobile, I need to get coordinates of the center of canvas for my current view. It should return the same result as if I mouse over the center.

I tried asking on fabric js github and they gave me this: but that result gave me back half my canvas height and width every time. can anyone help me understand why?

var myCenterCoordinates = fabric.util.transformPoint({
  x: canvas.width / 2,
  y: canvas.height / 2,
}, fabric.util.invertTransform(canvas.viewportTransform));

If i mouse over the exact center of the canvas(i do have mouse position set up), I should see the same result of(x and y) if i call getcentercoordinates function

edit: fabric.util.invertTransform(canvas.viewportTransform)[4] and fabric.util.invertTransform(canvas.viewportTransform)[5] gives you your current x and y coodinates for top left corner of your current view point, so we might be able to do something with that strong text

Upvotes: 1

Views: 2791

Answers (2)

Liam Pillay
Liam Pillay

Reputation: 826

To get the center of the canvas

canvas.getCenter(); // Returns { top: number, left: number }

source: http://fabricjs.com/docs/fabric.Canvas.html#getCenter

Upvotes: 0

Darren Zou
Darren Zou

Reputation: 143

I found the answer:

var zoom=canvas.getZoom()
function CenterCoord(){
   return{
      x:fabric.util.invertTransform(canvas.viewportTransform)[4]+(canvas.width/zoom)/2,
      y:fabric.util.invertTransform(canvas.viewportTransform)[5]+(canvas.height/zoom)/2
   }
}

to use this:

var centerX=CenterCoord().x
var centerY=CenterCoord().y

Upvotes: 4

Related Questions