1

I'm currently making a game, and i need to zoom into canvas. I've read a lot about how to zoom in canvas, with the ctx.scale() propriety, the thing is, I want to zoom with both fingers.

I already have the zoom, but it's zooming from the top/left canvas, and not on the middle of my fingers. I have the middle point between finger 1 and finger 2, but i don't know how to zoom into that specific middle point !

This exemple pretty sums up what i need (I just need the zoom) : Zoom Canvas to Mouse Cursor

It's working really fine, but with the wheel !

If any of you as any ideas, I'd be really glad to talk ! :)

Thanks everyone !

Community
  • 1
  • 1
Kaiymu
  • 23
  • 1
  • 6
  • Can you provide a jsfiddle with a working example? – aaron-bond Feb 11 '14 at 11:52
  • Actually, i can't, because my files are calling a lot of external files. But i can provide the JavaScript. http://pastebin.com/sp06RjHr Sorry for the french variable, but where I work we have to put everything in French :) – Kaiymu Feb 11 '14 at 12:05

2 Answers2

2

I added the touch events ... now you need to find the middle of all points in the evt.touches array (each one has a clientX and clientY, among other properties)

You will also need to keep track the distance beetwen those points in order to change the zoom level.

This bin might help you (check line 46) http://jsbin.com/dived/1/edit?js,output

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
0

If you have the center point from which you want to scale, you could use the translation tool provided by the CanvasRenderingContext2D:

void translate(
   in float x,
   in float y
);

So when you have your canvas context in a variable ctx do

ctx.translate(x, y);

And then

ctx.scale(x, y);

The ctx.translate(x, y) places the origin to x, y coordinates. By default, the origin of the CanvasRenderingContext2D is at 0, 0 (http://www.w3.org/TR/2dcontext/) so that's why the scaling originates from the top left corner.

Source https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D#translate()

  • Thanks for your help ! And i guess my x/y float, must be the middle position of the fingers, right ? – Kaiymu Feb 11 '14 at 12:07
  • Yes, that's correct. I assume that you already have the formula for calculating the midpoint. If not, you can look for a "midpoint formula on a segment" on the Internet but it's not difficult to construct it yourself at all. –  Feb 11 '14 at 12:14
  • Thanks Tom ! Sorry again, but another question : translate takes a X and Y position float But scale takes a float that scale all of my context, not a X and Y value ? Or I'm defintly wrong ! – Kaiymu Feb 11 '14 at 12:17
  • Well, according to the standards, `void scale(x, y)` takes two arguments: "The x argument represents the scale factor in the horizontal direction and the y argument represents the scale factor in the vertical direction. The factors are multiples" (http://www.w3.org/TR/2dcontext/#dom-context-2d-scale). Depends on the implementation but in my opinion most standard implementations (e.g. web browsers) will conform with it. I think that you can call the method with just one parameter which means the other parameter will be held at 1 (but don't take my word on this value). I hope that this helps. –  Feb 11 '14 at 12:24