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>