HTML5画布图像工具提示

Question

所以，我一直在尝试在这个黄色圆圈上绘制图像（标记）。我尝试在画布圈内的图像上显示随机点/标记。我想显示这样的工具提示：

这是我的代码：

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}



var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


//create circle 
ctx.beginPath();
ctx.arc(190, 190, 190, 0, 2 * Math.PI);

//circle background color
ctx.fillStyle = 'rgba(255, 238, 48, 0.11)';
ctx.fill();

//circle border
ctx.lineWidth = 1;
ctx.strokeStyle = '#FFC500';
ctx.stroke();
ctx.closePath();




var xCor, yCor, p1, p2, pcolor, posY = 100,
    txtwidth, txtLoc = "hello world";

function getXY() { //get x/y random coordinate
    xCor = randomIntFromInterval(50, 300);
    yCor = randomIntFromInterval(50, 300);
}


function drawTextBG(ctx, txtLoc, font, x, y) {

    ctx.save();
    ctx.font = font;
    ctx.textBaseline = 'top';
    ctx.fillStyle = '#fff';

    var width = ctx.measureText(txtLoc).width;
    ctx.fillRect(x, y, width, parseInt(font, 10));

    ctx.fillStyle = '#000';
    ctx.fillText(txtLoc, x, y);

    ctx.restore();
}

function drwLine(p1, p2, pcolor) {
    ctx.beginPath();
    ctx.moveTo(p1 + 10, p2);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = pcolor;
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    console.log(p1 + ' ' + p2);
}


//insert image map marker
var t, mark = new Image();
mark.src = "http://icons.iconarchive.com/icons/e-young/gur-project/32/map-pointer-icon.png";

mark.onload = function () {

    getXY();
    ctx.drawImage(mark, xCor, yCor);
    drwLine(xCor, yCor, '#d93030');
    //drawTextBG(ctx, txtLoc, '14px arial', 30, 30);
    //console.log(xCor+' '+yCor);

    getXY();
    ctx.drawImage(mark, xCor, yCor);
    drwLine(xCor, yCor, 'd93030');
    //console.log(xCor+' '+yCor);

    getXY();
    ctx.drawImage(mark, xCor, yCor);
    drwLine(xCor, yCor, 'd93030');
    //console.log(xCor+' '+yCor);

    getXY();
    ctx.drawImage(mark, xCor, yCor);
    drwLine(xCor, yCor, 'd93030');
    //console.log(xCor+' '+yCor);

    getXY();
    ctx.drawImage(mark, xCor, yCor);
    drwLine(xCor, yCor, 'd93030');
    //console.log(xCor+' '+yCor);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="myCanvas" class="mycanv" height="390" width="390"> Your browser does not support the HTML5 canvas tag.</canvas>

全部使用画布。

Answer 1

您可以使用矢量数学来查找工具提示的偏移量。您可以执行以下示例。

// Functions
function randInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function point(x, y) {
  return { "x" : x, "y" : y };
}

function vector(p1, p2) {
  return point(p2.x - p1.x, p2.y - p1.y);
}

function normalize(v) {
  var mag = Math.abs(Math.sqrt((v.x * v.x) + (v.y * v.y)));
  return point(v.x / mag, v.y / mag);
}

function normalize2(p1, p2) {
  return normalize(vector(p1, p2));
}

function add(p1, p2) {
  return point(p1.x + p2.x, p1.y + p2.y);
}

function mult(p, x) {
  return point(p.x * x, p.y * x);
}

function offsetPoint(p1, p2, offset) {
  return add(p2, mult(normalize2(p1, p2), offset));
}

function randPoint() {
  return point(randInt(50, 300), randInt(50, 300));
}

// Methods
function drawToolTip(ctx, origin, p, text, font, padding) {
  ctx.save();
  ctx.font = font;
  ctx.textBaseline = 'top';
  ctx.fillStyle = '#FF0';

  var v = offsetPoint(origin, p, 32);
  var textMetrics = ctx.measureText(text);
  var textWidth = textMetrics.width;
  var textHeight = parseInt(font, 10);
  var x1 = v.x - padding, x2 = textWidth + padding*2;
  var y1 = v.y - padding, y2 = textHeight + padding*2;

  drawLine(ctx, point(p.x+10, p.y), point(x1, y1));
  
  ctx.fillRect(x1, y1, x2, y2);
  ctx.rect(x1, y1, x2, y2);
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.fillStyle = '#000';
  ctx.fillText(text, v.x, v.y);
  ctx.restore();
}

function drawLine(ctx, p1, p2, pcolor) {
  ctx.beginPath();
  ctx.moveTo(p2.x + 10, p2.y);
  ctx.lineTo(p1.x, p1.y);
  ctx.strokeStyle = pcolor;
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  console.log(p2.x + ' ' + p2.y);
}

function drawImage(ctx, p, mark) {
  ctx.drawImage(mark, p.x - MARKER_WIDTH/4, p.y - MARKER_HEIGHT/2);
}

function drawRandMarker(toolTipText) {
  p = randPoint();
  drawLine(ctx, origin, p, '#d93030');
  drawImage(ctx, p, mark);
  drawToolTip(ctx, origin, p, toolTipText, '14px arial', 2);
}

// Constants
var MARKER_SRC    = "http://icons.iconarchive.com/icons/e-young/gur-project/32/map-pointer-icon.png";
var MARKER_WIDTH  = 32;
var MARKER_HEIGHT = 32;
var DEFAULT_TEXT  = "Hello World";

// Begin main logic
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var origin = point(100, 100);

// Create circle 
ctx.beginPath();
ctx.arc(190, 190, 190, 0, 2 * Math.PI);

// Circle background color
ctx.fillStyle = 'rgba(255, 238, 48, 0.11)';
ctx.fill();

// Circle border
ctx.lineWidth = 1;
ctx.strokeStyle = '#FFC500';
ctx.stroke();
ctx.closePath();

// Insert image map marker
var t, mark = new Image();
mark.src = MARKER_SRC;

mark.onload = function () {
  drawRandMarker(DEFAULT_TEXT);
  drawRandMarker(DEFAULT_TEXT);
  drawRandMarker(DEFAULT_TEXT);
  drawRandMarker(DEFAULT_TEXT);
}

<canvas id="myCanvas" class="mycanv" height="390" width="390">Your browser does not support the HTML5 canvas tag.</canvas>