javascript - html5 Canvas 工具提示仅对最后绘制的对象可见，对以前的对象不可见

Question

我到底想实现的是

1. 在 Canvas 上绘制对象
2. 在鼠标悬停时在工具提示中显示相关数据。

here可以查看代码。

var canvasBack;
var canvasLabel;
var canvasDraw;
var ctxBack;
var ctxLabel;
var ctxDraw;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0;
var mousey = 0;
var canWidth;
var canHeight;
var scaleParameter;
var radius;
var xVertex;
var yVertex;
var hotspots = [];

// initialization on loading of canvas
$('canvas').ready(function() {
  init();
});

// initialization function used for binding events, and inital logic implemented.
function init() {
  scaleParameter = 1;
  canvasBack = document.getElementById('backSpace');
  canvasLabel = document.getElementById('layerCanvas');
  canvasDraw = document.getElementById('drawSpace');
  ctxBack = canvasBack.getContext('2d');
  ctxLabel = canvasLabel.getContext('2d');
  ctxDraw = canvasDraw.getContext('2d');

  canWidth = parseInt($(canvasBack).attr('width'));
  canHeight = parseInt($(canvasBack).attr('height'));

  var canvasx = $(canvasBack).offset().left;
  var canvasy = $(canvasBack).offset().top
  var mousedown = false;

  //Mousedown
  $('canvas').on('mousedown', function(e) {
    $('#drawSpace').css('display', 'block');
    last_mousex = mousex = parseInt(e.clientX - canvasx);
    last_mousey = mousey = parseInt(e.clientY - canvasy);
    mousedown = true;
  });

  //Mouseup
  $('canvas').on('mouseup', function(e) {
    hotspots.push({
      x: xVertex,
      y: yVertex,
      radius: radius,
      tip: 'You are over ' + mousex + ',' + mousey
    });
    let cw = canvasBack.width;
    let ch = canvasBack.height;
    ctxBack.drawImage(canvasDraw, 0, 0, cw, ch);
    $('#drawSpace').css('display', 'none');
    mousedown = false;
  });

  //Mousemove
  $('canvas').on('mousemove', function(e) {
    mousex = parseInt(e.clientX - canvasx);
    mousey = parseInt(e.clientY - canvasy);
    if (mousedown) {
      // draw(mousedown);
      drawEllipse(last_mousex, last_mousey, mousex, mousey);
    } else {
      hoverTooltip();
    }
  });
}


function drawEllipse(x1, y1, x2, y2) {
  var leftScroll = $("#scrollParent").scrollLeft();
  var topScroll = $("#scrollParent").scrollTop();
  let cw = canvasBack.width;
  let ch = canvasBack.height;
  ctxDraw.clearRect(0, 0, cw, ch);
  var radiusX = x2 - x1,
    radiusY = y2 - y1,
    centerX = x1 + radiusX,
    centerY = y1 + radiusY,
    step = 0.01,
    a = step,
    pi2 = Math.PI * 2 - step;

  radius = Math.sqrt(radiusX * radiusX + radiusY * radiusY) / 2;

  ctxDraw.beginPath();
  ctxDraw.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
  ctxDraw.closePath();
  ctxDraw.fillStyle = 'green';
  ctxDraw.fill();
  ctxDraw.strokeStyle = '#000';
  ctxDraw.stroke();

  xVertex = centerX;
  yVertex = centerY;
}

// tooltip show on hover over objects
function hoverTooltip() {
  var leftScroll = $("#scrollParent").scrollLeft();
  var topScroll = $("#scrollParent").scrollTop();
  let cw = canvasBack.width;
  let ch = canvasBack.height;

  for (var i = 0; i < hotspots.length; i++) {
    var h = hotspots[i];
    var dx = mousex - h.x;
    var dy = mousey - h.y;
    if (dx * dx + dy * dy < h.radius * h.radius) {
      $('#console').text(h.tip);
      ctxLabel.clearRect(0, 0, cw, ch);
      ctxLabel.fillText(h.tip, mousex + leftScroll, mousey + topScroll);
    } else {
      ctxLabel.clearRect(0, 0, cw, ch);
    }
  }
}

#scrollParent {
  width: 644px;
  height: 364px;
  overflow: auto;
  position: relative;
}

#scrollParent>canvas {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #ababab;
}

#backSpace {
  z-index: 0;
}

#drawSpace {
  display: none;
  z-index: 1;
}

#layerCanvas {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scrollParent">
  <!-- actual canvas that is visible -->
  <canvas width="640" height="360" id="backSpace"></canvas>
  <!-- canvas used for drawing new objects -->
  <canvas width="640" height="360" id="drawSpace"></canvas>
  <!-- canvas used to display tooltip -->
  <canvas width="640" height="360" id="layerCanvas"></canvas>
</div>
<div id="console"></div>

</div>

实际问题出在下面的图像中，绘制第一个对象时工具提示工作正常，但是一旦绘制了第二个对象，工具提示就只对第二个对象有效，对之前绘制的对象无效。

是什么导致了这个问题，如何解决？

Answer 1

去掉else不会在离开elipse的时候去掉label。

使用 break 从数组中找到正确的椭圆后，您需要退出循环。

function hoverTooltip() {
  var leftScroll = $("#scrollParent").scrollLeft();
  var topScroll = $("#scrollParent").scrollTop();
  let cw = canvasBack.width;
  let ch = canvasBack.height;

  for (var i = 0; i < hotspots.length; i++) {
    var h = hotspots[i];
    var dx = mousex - h.x;
    var dy = mousey - h.y;
    if (dx * dx + dy * dy < h.radius * h.radius) {
      $('#console').text(h.tip);
      ctxLabel.clearRect(0, 0, cw, ch);
      ctxLabel.fillText(h.tip, mousex + leftScroll, mousey + topScroll);
      break; // exit the loop
    } else {
       ctxLabel.clearRect(0, 0, cw, ch);
    }
  }
}

更新

我认为如果将两个对象绘制在彼此之上，它的表现会很差。试试这个。显示最新抽取点的信息。

function hoverTooltip() {
  var leftScroll = $("#scrollParent").scrollLeft();
  var topScroll = $("#scrollParent").scrollTop();
  let cw = canvasBack.width;
  let ch = canvasBack.height;

  var spots = hotspots.filter((h) => {
    var dx = mousex - h.x;
    var dy = mousey - h.y; 
    return (dx * dx + dy * dy < h.radius * h.radius);
  })

  if (spots.length > 0) {
    var h = spots[spots.length - 1]; // latest drawn spot
    $('#console').text(h.tip);
    ctxLabel.clearRect(0, 0, cw, ch);
    ctxLabel.fillText(h.tip, mousex + leftScroll, mousey + topScroll);
  } 
  else
  {
    ctxLabel.clearRect(0, 0, cw, ch);
  }
}