yumedoll
Active Coder
I'm making a game about baking a decorating a cake using Interact.js.
Everything is done so far but I'm trying to figure out how to make it so the image that is dragged onto the cake (which has a canvas in it's div) will be printed on the canvas at the exact position it was dropped.
The idea is:
- There's a menu full of img elements which are all decorations
Things to note:
- The canvas itself is not the dropzone but rather its parent div.
-
- This is based off of the Interactjs library but what I need doesn't seem to be provided by the library.
- splotch is a sound effect.
- This is part of a switch statement that fires a different line of code for each element dropped into any element with the class "dropzone" depending on the dropped element's class, this is the last case of the switch statement.
-
- I set the x and y coordinates of the drawImage to 100 each just to see if the image prints or not and it does just fine.
What I've tried:
- This method here just freezes the draggable element in place after it is dropped and doesn't print the image.
-This little doohickey:
but it doesn't work either
You can see the full script involving this here and you can actually try the game here (You'll need to get through the cake baking and mixing process first before you reach the part I'm talking about though, be careful not to burn the cake!! ⁽⁽◝( •௰• )◜⁾⁾)
Everything is done so far but I'm trying to figure out how to make it so the image that is dragged onto the cake (which has a canvas in it's div) will be printed on the canvas at the exact position it was dropped.
The idea is:
- There's a menu full of img elements which are all decorations
- The user clicks and drags it onto the cake.
- Once dropped, the img element returns back to its original position but it leaves behind an image of itself drawn on the cakes canvas element where it was dropped.
Things to note:
- The canvas itself is not the dropzone but rather its parent div.
-
draggableElement refers to the events related target, the draggable element.- This is based off of the Interactjs library but what I need doesn't seem to be provided by the library.
- splotch is a sound effect.
- This is part of a switch statement that fires a different line of code for each element dropped into any element with the class "dropzone" depending on the dropped element's class, this is the last case of the switch statement.
-
draggableElement.removeAttribute("data-x"); draggableElement.removeAttribute("data-y"); is required for the img element to return back to it's original position.- I set the x and y coordinates of the drawImage to 100 each just to see if the image prints or not and it does just fine.
JavaScript:
case cls.contains('decopart'):
splotch.play();
var decoposX = parseFloat(draggableElement.getAttribute("data-x"))*100;
decoctx.drawImage(draggableElement, 100, 100);
draggableElement.removeAttribute("data-x");
draggableElement.removeAttribute("data-y");
draggableElement.style.transform = 'translate(0px, 0px)';
draggableElement.style.webkitTransform = 'translate(0px, 0px)';What I've tried:
- This method here just freezes the draggable element in place after it is dropped and doesn't print the image.
-This little doohickey:
JavaScript:
case cls.contains('decopart'):
splotch.play();
var decoposX = parseFloat(draggableElement.getAttribute("data-x"))*100;
var decoposY = parseFloat(draggableElement.getAttribute("data-y"))*100;
decoctx.drawImage(draggableElement, decoposX, decoposY);
draggableElement.removeAttribute("data-x");
draggableElement.removeAttribute("data-y");
draggableElement.style.transform = 'translate(0px, 0px)';
draggableElement.style.webkitTransform = 'translate(0px, 0px)';You can see the full script involving this here and you can actually try the game here (You'll need to get through the cake baking and mixing process first before you reach the part I'm talking about though, be careful not to burn the cake!! ⁽⁽◝( •௰• )◜⁾⁾)
