Question

在渲染计算机图形场景期间进行坐标转换后，如何将渲染场景上的输入映射回原始actor坐标系？

使用此JSFiddle https://jsfiddle.net/bbz5s183/3/作为起点，实现canvas click事件处理程序，以便。

它可以识别是否点击了一颗星。
无论画布如何调整大小，它都能始终如一地工作。

JSFIDDLE SCRIPT CONTENT

var draggable = document.getElementById('draggable')
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// Draw a star in a 1 x 1 coordinate plane.
function star(color) {
  context.beginPath();
  context.moveTo(0.5, 0);
  context.lineTo(0.15, 1.0);
  context.lineTo(1.0, 0.4);
  context.lineTo(0, 0.4);
  context.lineTo(0.85, 1.0);
  context.closePath();

  context.fillStyle = color;
  context.fill();
}

// Draw a scene of stars in a coordinate plane defined by the canvas.
// This is initially 300 x 300, but can be resized to anything by dragging the gray border.
function render() {
  context.setTransform(1, 0, 0, 1, 0, 0);
  context.translate(canvas.width / 2, canvas.height / 2);
  context.scale(canvas.width / 5, canvas.height / 5);
  star('red');

  context.setTransform(1, 0, 0, 1, 0, 0);
  context.translate(canvas.width / 4, canvas.height / 4);
  context.scale(canvas.width / 5, canvas.height / 5);
  star('yellow');
}

// Pop an alert indicating which star (if any) was clicked on.
// NOTE: The logic MUST work consistently no matter how the canvas is resized.
canvas.addEventListener('click', function (event) {
    event.stopImmediatePropagation();

  // HELP ME !!!
  // HELP ME !!!
  // HELP ME !!!
  // HELP ME !!!
});

// IGNORE: It allows the canvas to resized by dragging on it.
draggable.addEventListener('mousedown', function handleMouseDown(mousedown) {
  document.addEventListener('mouseup', function handleMouseUp(mouseup) {
    var currWidth = Number(canvas.getAttribute('width'));
    var deltaWidth = mouseup.clientX - mousedown.clientX;
    var currHeight = Number(canvas.getAttribute('height'));
    var deltaHeight = mouseup.clientY - mousedown.clientY;

    canvas.setAttribute('width',  currWidth + deltaWidth);
    canvas.setAttribute('height',  currHeight + deltaHeight);
    document.removeEventListener('mouseup', handleMouseUp);

    render();
  });
});

render();

Answer 1

回答了我自己的问题：https://jsfiddle.net/bbz5s183/4/

JAVASCRIPT跟随

// Draw a scene of stars in a coordinate plane defined by the canvas.
// This is initially 300 x 300, but can be resized to anything by dragging the gray border.
function render() {
    bounds = [];

    /* RENDER RED ACTOR - BOUNDING BOX */
  var red = {
    name: 'red',

    // Translate to 25% right, 25% down on canvas.
    x: 0.25 * canvas.width,
    y: 0.25 * canvas.height,

    // Scale to fill 20% of canvas.
    width: 0.2 * canvas.width,
    height: 0.2 * canvas.height
  };

    context.setTransform(1, 0, 0, 1, 0, 0);
  box('red', red);
  bounds.push(red);

    /* RENDER RED ACTOR - MODEL */
  context.setTransform(1, 0, 0, 1, 0, 0);
  context.translate(red.x, red.y);      
  context.scale(red.width, red.height);
  star('red');

  /* RENDER YELLOW ACTOR - BOUNDING BOX */
  var yellow = {
    name: 'yellow',

    // Translate to 50% right, 50% down on canvas.
    x: 0.50 * canvas.width,
    y: 0.50 * canvas.height,

    // Scale to fill 20% of canvas.
    width: 0.2 * canvas.width,
    height: 0.2 * canvas.height
  };

  context.setTransform(1, 0, 0, 1, 0, 0);
  box('yellow', yellow);
  bounds.push(yellow);

  /* RENDER YELLOW ACTOR - MODEL */
  context.setTransform(1, 0, 0, 1, 0, 0);
  context.translate(yellow.x, yellow.y);        
  context.scale(yellow.width, yellow.height);
  star('yellow');
}

// Pop an alert indicating which star (if any) was clicked on.
// NOTE: The logic MUST work consistently no matter how the canvas is resized.
canvas.addEventListener('click', function (event) {
  var x = event.pageX - event.target.offsetLeft; 
    var y = event.pageY - event.target.offsetTop;

  for (var i = 0; i < bounds.length; i++) {
    if (boxIntersection(bounds[i], x, y)) {
        alert(bounds[i].name);
    };
  }

  event.stopImmediatePropagation();
  return false;
});

将翻译的坐标映射回原始坐标

1 个答案: