How to make canvas to response on dragging things on

BenBruce · 2020-01-07T19:00:50+00:00

I need to make canvas change its images once the outer image was dragged and dropped on top of it. Now it only works with dragging and dropping things on top...

How to make canvas to response on dragging things on

Sempervivum

If I read the description correctly, it's left up to you which technique you use. Thus canvas might be an option. And the description doesn't specify how the cameras should be moved. Might it be possible too to move them by the arrow keys? However using the mouse is more sophisticated.
Unfortunately I could not find a description of that game. Apparently there are different types of camera and each type can view to different directions. And, to make the game more challenging, the directions are not visible to the user.

Keeping this in mind I extended my demo in that way that the camera can be dropped on a road and then the road is highlighted downwards to it's end. Feel free to add more cameras, use images for the cameras and extend them for viewing in other directions.
https://jsfiddle.net/Sempervivum/cjao49xe/62/

BenBruce

Sempervivum It seems like adding images goes a bit another way than drawing shapes, it needs getContext from getElementById function and when I did it once I move the cursor away from the canvas the image disappears https://jsfiddle.net/BenBruceDjent/bn7x5c0g/3/

Sempervivum

No, drawing images is much easier when using jCanvas: No image object necessary, simply call cv.drawImage:

		cv.drawImage({
//			source: img,
      layer: true,
      source: 'https://webentwicklung.ulrichbangert.de/images/bild1.jpg',
      x: xImg, 
      y: yImg,
      width: size, 
      height: size,
      fromCenter: false,
      draggable: true,
      drag: onDrag,
      dragstop: onDragEnd
});

Additionally we need to set layer and draggable to true to make the image draggable. Then add the eventhandlers.

onload event for the complete script is not necessary in jsfiddle as this is done automatically.

This works so far:
https://jsfiddle.net/Sempervivum/5odjs4f0/28/

BenBruce

Came something like that but it works really strange https://jsfiddle.net/BenBruceDjent/bn7x5c0g/6/

Sempervivum

You have to include jCanvas from CDN like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/jcanvas.js"></script>
And you will have to load the images from an online resource like I did.

BenBruce

https://jsfiddle.net/BenBruceDjent/en8ypg5a/2/
Did it but it still works strange

Sempervivum

Apparently you did something completely different. Change the head of the HTML to this:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>cameras of the city</title>
	<link rel="stylesheet" href="styles.css">
	<script  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/jcanvas.js"></script>
</head>

BenBruce

Sempervivum Do all cameras change color only in one direction? Seems like it does but only with some random chance of success and sometimes it changes color only for one square in the middle of the road.

BenBruce

https://jsfiddle.net/BenBruceDjent/bn7x5c0g/9/
The same result

Sempervivum

Do all cameras change color only in one direction?

Yes, currently they do. I left this up to you to implement different directions. The direction is defined in this loop:

  let finish = false;
  for (let i2 = i; i2 < themap.length && !finish; i2++) {
    if (themap[i2][j] == 0) {
      const themaplayer = maplayers[i2][j];
      themaplayer.fillStyle = 'lightsalmon';
    } else {
      finish = true;
    }
  }

Sempervivum

When changing i2 by i2++ the direction is downwards, when changing it by i2-- the direction is upwards.
Don't forget to adjust the limit to i2 >= 0

BenBruce

Sempervivum i2 >= 0 only makes changing color all down the canvas, why it needs to be adjusted?

BenBruce

And cloning those cameras because I can have several same cameras on the streets

Sempervivum

You have to change both, the limit and the incrementation:
for (let i2 = i; i2 >= 0 && !finish; i2--) {

BenBruce

Now it barely works https://jsfiddle.net/BenBruceDjent/bn7x5c0g/12/

Sempervivum

You have to change your image path:

		  cv.drawImage({
		      layer: true,
		      source: 'https://res.cloudinary.com/benbruce/image/upload/v1578505333/camera' + (i+1) +'.png',
		      x: 559, 
		      y: y,
		      width: size, 
		      height: size,
		      fromCenter: false,
		      draggable: true,
		      drag: onDrag,
		      dragstop: onDragEnd
		});

And before starting the second loop we have to set the variable finish to false again:

function onDragEnd(layer) {
	  console.log('dragend');
	  // x and y are properties of the layer, i. e. the circle
	  const x = layer.x + diameter, y = layer.y + diameter;
	  const i = Math.floor(y / hRect), j = Math.floor(x / wRect);
	  // get the map layer the mouse is currently over
	  const themaplayer = maplayers[i][j];
	  console.log(x, y, i, j);
	  if (isIntersect(layer, themaplayer, themap[i][j])) {
	    themaplayer.fillStyle = 'lightsalmon';
	  }
	  let finish = false;
	  for (let i2 = i; i2 < themap.length && !finish; i2++) {
	    if (themap[i2][j] == 0) {
	      const themaplayer = maplayers[i2][j];
	      themaplayer.fillStyle = 'lightsalmon';
	    } else {
	      finish = true;
	    }
	  }
          finish = false; // <-- has to be set to false again
	  for (let i2 = i; i2 >= 0 && !finish; i2--) {
	    if (themap[i2][j] == 0) {
	      const themaplayer = maplayers[i2][j];
	      themaplayer.fillStyle = 'lightsalmon';
	    } else {
	      finish = true;
	    }
	  }
	  cv.drawLayers();
	}

Sempervivum

PS: And there was the windows.onload again. jsfiddle does this for us already.

Sempervivum

This works for me:
https://jsfiddle.net/Sempervivum/5xpyq1am/10/

Sempervivum

PPS: In order to set x and y to the center of the circle image we have to divide the diameter by 2:

function onDragEnd(layer) {
	  console.log('dragend');
	  // x and y are properties of the layer, i. e. the circle
	  const x = layer.x + diameter / 2, y = layer.y + diameter / 2;
	  const i = Math.floor(y / hRect), j = Math.floor(x / wRect);

BenBruce

Sempervivum Dividing didn't make much. It almost still works the same way as I recorded

BenBruce

https://gofile.io/?c=9QTdQW
I recorded the workflow of the game. Does it work the same way as you have it?