Forums

Start a new topic

iink SDK Web

Answered

How do I add zoom-in and zoom-out to the IinkJs web editor?

Is there a way to add zoom-in and zoom-out functionality to the iinkJs web editor?

 

In API Reference, I found a zoom function. However, it did not work as expected.

 

Do you have any examples or ideas for how I can implement zoom-in and zoom-out?

Best Answer

I am working on a ReactJs app. My app has two layers. One layer for showing pdf files,

and the other layer is IinkJs Editor which is overlap the pdf layer.


I want to add a feature when I zoom in or zoom out of the pdf layer, 

The IinkJs Editor will adjust the pdf Layer Height width and drawn strokes.


Now Problem is when I increase the editor Container div width and height by dynamically

But into the inner Html SVG data-layer="Model" and SVG data-layer=" Capture" 

not getting updated values. Also problem with the iinkJS pen and drawn strokes.

You can see the problem in this video https://youtu.be/ypmisBH2OcA

resize function also not working with zoom-in/zoom-out.


So Now How can I get the zoom in / out feature in iinkJs editor?

3 CommentsSorted by Oldest First

Dear Biplob,


Thank you for contacting us.

Normally you should benefit from the zoom-in zoom-out feature from your web browser directly.


So we are not sure to fully get your request.

Could you please share with us a litlle bit more on what you want to achieve?


Regards,


Gwenaëlle



Answer

I am working on a ReactJs app. My app has two layers. One layer for showing pdf files,

and the other layer is IinkJs Editor which is overlap the pdf layer.


I want to add a feature when I zoom in or zoom out of the pdf layer, 

The IinkJs Editor will adjust the pdf Layer Height width and drawn strokes.


Now Problem is when I increase the editor Container div width and height by dynamically

But into the inner Html SVG data-layer="Model" and SVG data-layer=" Capture" 

not getting updated values. Also problem with the iinkJS pen and drawn strokes.

You can see the problem in this video https://youtu.be/ypmisBH2OcA

resize function also not working with zoom-in/zoom-out.


So Now How can I get the zoom in / out feature in iinkJs editor?

Hi


Thank you for sharing the video with us.

From the video, my understanding is that you want both to enlarge the editor view and zoom  according the scale factor between the previous size and new one.

In such a case, you should probably try to use the Editor resize and iinkWsRecognizer.js zoom functions.


Best regards,


Gwenaëlle