Forums

Start a new topic

Text

Answered

Facing problem on find eraser and highlight pencil on iink JS.

We have used this iink js(https://github.com/MyScript/iinkJS) code but I can't able to find eraser and highlight pen same as nebo app.(see this screenshot: http://prntscr.com/1qgwday)

 

Also their is another demo code is available on this site:(https://webdemo.myscript.com/views/diagram/edit) but this code is on Vue JS and we have implement simple our iink JS code.

 

If we change simple iink code to Vue JS then we need to change on whole function and our time and effort are totally waste. I have spent around 3-4 days on iink code. so we need to find eraser and highlight pen code for our existing iink code.

 

we have added code and reference below:

 

We have used this code:

http://prntscr.com/1qgvgx0

https://github.com/MyScript/iinkJS

 

So could you please let me know how we use eraser and highlight pencil using iink JS.

 

Would you please help us to solve out this problem.

 

Thanks.  

Best Answer

Dear Sam,

thank you for your questions.

Currently, by default the eraser is not supported in the iinkJS.

Nevertheless, an eraser can be implemented using a custom grabber: https://developer.myscript.com/docs/interactive-ink/1.4/web/iinkjs/advanced-usage/#customization-example---custom-grabber

To see an example of implementation, you can refer to the batch-mode-explorer sample we provide: https://github.com/MyScript/web-integration-samples/tree/master/batch-mode-explorer

In particular, the https://github.com/MyScript/web-integration-samples/blob/master/batch-mode-explorer/src/components/VueEditor.vue file.

The eraser is enabled as follows (line 207):

EventBus.$on('eraserEnabled', () => {
this.pointerType = 'ERASER';
this.editor.pointerType = 'ERASER';
});

And the source of the custom_grabber is available as a JS file (which you can refer to to create your own one): https://github.com/MyScript/web-integration-samples/blob/master/batch-mode-explorer/src/utils/custom_grabber.js

In the latter, when the pointerType is set as 'ERASER', the eraseStroke function (see line 52) is called.

Regarding the hightlighter support with the iinkJS, it is not possible at present, and we cannot commit if/when it will be.

Best regards,

Olivier

1 Comment
Answer

Dear Sam,

thank you for your questions.

Currently, by default the eraser is not supported in the iinkJS.

Nevertheless, an eraser can be implemented using a custom grabber: https://developer.myscript.com/docs/interactive-ink/1.4/web/iinkjs/advanced-usage/#customization-example---custom-grabber

To see an example of implementation, you can refer to the batch-mode-explorer sample we provide: https://github.com/MyScript/web-integration-samples/tree/master/batch-mode-explorer

In particular, the https://github.com/MyScript/web-integration-samples/blob/master/batch-mode-explorer/src/components/VueEditor.vue file.

The eraser is enabled as follows (line 207):

EventBus.$on('eraserEnabled', () => {
this.pointerType = 'ERASER';
this.editor.pointerType = 'ERASER';
});

And the source of the custom_grabber is available as a JS file (which you can refer to to create your own one): https://github.com/MyScript/web-integration-samples/blob/master/batch-mode-explorer/src/utils/custom_grabber.js

In the latter, when the pointerType is set as 'ERASER', the eraseStroke function (see line 52) is called.

Regarding the hightlighter support with the iinkJS, it is not possible at present, and we cannot commit if/when it will be.

Best regards,

Olivier