Search code examples
fabricjs

FabricJS, How to implement touch controls in fabric js

I have tried the answer from: https://stackoverflow.com/a/45131912/12114516

But, when I try to drag my canvas around, only blue box appear. So I tried to console log when touch even was registered, and that did not work. This blue drag box covers touch command This is what I see when i try to drag: enter image description here

ANSER IS HERE: I digged around for a bit and found out that the demo:http://fabricjs.com/touch-events

IS USING ANOTHER JS FILE: http://fabricjs.com/lib/fabric_with_gestures.js so what I just go to that website, ctrl+a, ctrl+c, make a new script file, ctrl+v and link my default-fabric js file from html to the new js file instead so how my script src looks like this:

<script src="/script/fabric_with_touch.js"></script>

Remeber that "fabric_with_touch.js" is a file I created and copy and pasted the website contents into. And don't worry, it won't mess with your mouse or keyboard controls.

Solution

  • Welp, I digged around for a bit and found out that the demo:http://fabricjs.com/touch-events

    IS USING ANOTHER JS FILE: http://fabricjs.com/lib/fabric_with_gestures.js so what I just go to that website, ctrl+a, ctrl+c, make a new script file, ctrl+v and link my default-fabric js file from html to the new js file instead so how my script src looks like this:

    <script src="/script/fabric_with_touch.js"></script>

    Remeber that "fabric_with_touch.js" is a file I created and copy and pasted the website contents into. And don't worry, it won't mess with your mouse or keyboard controls, I have tried that too