clickable object or shape inside a canvas viewbox window

Question




Page Title






  × 
  About
  Services
  Clients
  Contact
    


  ☰ Menu

is there away to make a shape or object clickable on canvas frame or viewbox, even when i zoom in or out, cause all the examples i saw was just a fixed clickable location. for instance google map locations when i zoom in i can click more objects. is there away to make a shape or object clickable on canvas frame or viewbox, even when i zoom in or out, cause all the examples i saw was just a fixed clickable location. for instance google map locations when i zoom in i can click more objects.

Andrew Gray · Accepted Answer

There are two spaces you have to account for, the actual canvas space and the translated space. This means you need to translate the mouse coordinates in order to know where in the space the object is actually located and map it back to the canvas coordinates so you can know if you are clicking on it. This is achieved by keeping track of the offset value you provided in the var originx, but the problem is that there is no way based on my trails at least for you to translate the mouse click location if you use the context.translate(originx, originy) if you both scale and pan the object space.

I have rewritten the code without the use of the translate function by making my own translate function that enables you to translate between the canvas space and object space in order to register a click event on the object regardless of the panned or zoomed in location.

This function also has a click to pan feature so you can click and drag the object screen to where ever you want to object to be positioned.

/*jshint esversion: 8 */

(function() {
  const canvas = document.querySelector("canvas");
  const context = canvas.getContext("2d");
  let canvasWidth = 600;
  let canvasHeight = 600;
  let offset = {
    x: 0,
    y: 0
  };
  let pan = {
    x: 0,
    y: 0
  };
  var zoomIntensity = 0.1;
  let scale = 1;
  let mouse = {
    x: 0,
    y: 0
  };
  let dragging = false;
  let square;

  let shapes = [{
      x: 170,
      y: 50,
      w: 50,
      h: 50,
      color: "blue"
    },
    {
      x: 85,
      y: 25,
      w: 50,
      h: 50,
      color: "red"
    },
    {
      x: 50,
      y: 100,
      w: 50,
      h: 50,
      color: "green"
    },
  ];

  function init() {
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    renderCanvas();
  }

  function drawSquare(x, y, width, height, color) {
    context.fillStyle = color;
    context.fillRect(x, y, width, height);
  }

  function objectsToCanvasScreen(x, y) {
    const canvasScreenX = Math.floor((x - offset.x) * scale);
    const canvasScreenY = Math.floor((y - offset.y) * scale);

    return {
      x: canvasScreenX,
      y: canvasScreenY
    };
  }

  function canvasToObjectsScreen(x, y) {
    return {
      x: x / scale + offset.x,
      y: y / scale + offset.y
    };
  }

  function renderCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    shapes.forEach(({
      x,
      y,
      w,
      h,
      color
    }, index) => {
      const {
        x: csx,
        y: csy
      } = objectsToCanvasScreen(x, y);
      shapes[index]._x = csx;
      shapes[index]._y = csy;
      shapes[index]._w = w * scale;
      shapes[index]._h = h * scale;
      drawSquare(csx, csy, w * scale, h * scale, color);
    });

  }

  canvas.onwheel = function(e) {
    const zoom = Math.exp((e.deltaY < 0 ? 1 : -1) * zoomIntensity);
    const beforeZoom = canvasToObjectsScreen(mouse.x, mouse.y);
    scale *= zoom;
    const afterZoom = canvasToObjectsScreen(mouse.x, mouse.y);
    offset.x += beforeZoom.x - afterZoom.x;
    offset.y += beforeZoom.y - afterZoom.y;

    renderCanvas();
  };
  canvas.onmousedown = function(e) {
    if (e.button === 0) {
      pan.x = mouse.x;
      pan.y = mouse.y;
      dragging = true;
    }
  };
  canvas.onmouseup = (e) => (dragging = false);
  canvas.onmousemove = function(e) {
    mouse.x = e.offsetX;
    mouse.y = e.offsetY;
    if (dragging) {
      offset.x -= (mouse.x - pan.x) / scale;
      offset.y -= (mouse.y - pan.y) / scale;

      pan.x = mouse.x;
      pan.y = mouse.y;
      renderCanvas();
    }
  };
  canvas.onclick = function(e) {
    shapes.forEach(({
      _x,
      _y,
      _w,
      _h,
      color
    }) => {
      const {
        x: mousex,
        y: mousey
      } = canvasToObjectsScreen(mouse.x, mouse.y);
      const {
        x: squarex,
        y: squarey
      } = canvasToObjectsScreen(_x, _y);
      if (
        mousex >= squarex &&
        mousex <= _w / scale + squarex &&
        mousey >= squarey &&
        mousey <= _h / scale + squarey
      ) {
        alert(`${color} clicked!`);
      }
    });

  };

  init();
})();

body {
  font-family: "Lato", sans-serif;
}

#canvas {
  background: #E1BC8B;
}

clickable object or shape inside a canvas viewbox window

Answers (1)

Related Questions