Start a new topic
Solved

Freehand drawing with Instant tracking

Hey everyone,
I'm trying to implement an app, where the user is able to do freehand drawing. While researching, I found this question and adapted the example Wikitude app instant tracking to be able to draw with canvas, but the translation of the drawing (AR.HtmlDrawable) does not correspond to the crosshair "area".

Is there any solution so far how to fix the translation or another way to get it work?

Thanks

zip
(434 KB)

Hallo Alexander,



would you mind recording a short video of your app running on a device? I have a hard time imagining what's actually happening when this code is being run. I think having a short video as a visual aid would be very helpful.



- Daniel



1 person likes this
Hey Daniel,

here is the video

 

MP4

Good morning Alexander,



what you're seeing is the expected behaviour for your code. You have your canvas attached to the root HTML of the app, which spans the entire screen, but then transfer the resulting image to an HTML drawable which is anchored somewhere in 3D space. For your use case you would need to either draw onto the HTML drawable directly or have an HTML drawable coincide with the canvas when transferring the image data. Both these approaches, I'm quite sure, are not possible with the JavaScript SDK. For variant one you would need access to the underlying web view of an HTML drawable, which the JS SDK does not provide and for variant two you would need the camera position relative to the tracking origin, which the JS SDK does not provide.


So, I think, for this use case the only option is using the native SDK.



- Daniel


1 person likes this
Login or Signup to post a comment