HTML画布悬停文本 [英] HTML Canvas Hover Text

问题描述

我有一个HTML画布，所有不同形状的所有不同的大小，它是通过解析外部文件的信息构建的。我想知道如何使它，使鼠标悬停在每个形状将显示其唯一的名称。我找到了如何在鼠标悬停为整个画布显示文本的资源，但我需要每个单独的形状显示一个独特的文本。感谢！

解决方案

您可以使用 context.isPointInPath

1. 从外部文件创建代表每个形状的javascript对象。
   
   

     var triangle = {
    name：'triangle'，
    color：'skyblue'，
    points： [{x：100，y：100}，{x：150，y：150}，{x：50，y：150}] 
   } 
     




2. 创建一个函数接受形状对象并从该形状对象：

     function defineShape（s）{
    ctx.beginPath 
    ctx.moveTo（s [0] .x，s [0] .y）; 
    for（var i = 1; i  ctx.lineTo（s [i] .x，s [i] .y）; 
   } 
    ctx.closePath（）; 
   } 
     




3. 使用 context.isPointInPath 以测试鼠标是否在最近定义的路径（从步骤＃2）。

     // define要测试的路径
    defineShape（triangle）; 
    
    //测试鼠标是否在该形状内
    if（context.isPointInPath（mouseX，mouseY）{
    //鼠标在形状内
   } 
     

：

  var canvas = document.getElementById（canvas）; var ctx = canvas.getContext（2d）; var cw = canvas.width; var ch = canvas.height; function reOffset（）{var BB = canvas.getBoundingClientRect（）; offsetX = BB.left; offsetY = BB.top;} var offsetX，offsetY; reOffset window.onscroll = function（e）{reOffset（）;} window.onresize = function（e）{reOffset（）;} ctx.font ='14px verdana'; var shapes = []; var triangle1 = {name：三角形1'，颜色：'skyblue'，drawcolor：'skyblue'，点：[{x：100，y：100}，{x：150，y：150}，{x：50，y：150} var triangle2 = {name：'triangle2'，color：'palegreen'，drawcolor：'palegreen'，points：[{x：220，y：100}，{x：270，y：150}，{x： y：150}]}; shapes.push（triangle1，triangle2）; $（＃canvas）。mousemove（function（e）{handleMouseMove（e）;}）; drawAll var i = 0; i  

  body {background-color ：象牙} #canvas {border：1px solid red; margin：0 auto; }  

 < script src =https：// ajax .htmlapple.com / ajax / libs / jquery / 1.9.1 / jquery.min.js>< / script>< h4>将鼠标悬停在形状上< / h4& canvaswidth = 300 height = 300>< / canvas>  

I have an HTML canvas with all different shapes of all different sizes and it is built by parsing information from an external file. I am wondering how I can make it so that hovering the mouse over each shape will display its unique name. I have found resources on how to display text on a mouse hover for the whole canvas, but I need each individual shape to display a unique text. Thanks!

解决方案

You can use context.isPointInPath to test if your mouse is hovering over one of your shapes.

1. Create a javascript object representing each shape from the external file.

   var triangle={
       name:'triangle',
       color:'skyblue',
       points:[{x:100,y:100},{x:150,y:150},{x:50,y:150}]
   };
   

2. Create a function that takes a shape-object and makes a Path from that shape-object:

   function defineShape(s){
       ctx.beginPath();
       ctx.moveTo(s[0].x,s[0].y);
       for(var i=1;i<s.length;i++){
           ctx.lineTo(s[i].x,s[i].y);
       }
       ctx.closePath();
   }
   

3. Use context.isPointInPath to test if the mouse is inside the most recently defined path (from step#2).

   // define the path to be tested
   defineShape(triangle);
   
   // test if the mouse is inside that shape
   if(context.isPointInPath(mouseX,mouseY){
       // the mouse is inside the shape
   }
   

Here's example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

ctx.font='14px verdana';

var shapes=[];

var triangle1={
  name:'triangle1',
  color:'skyblue',
  drawcolor:'skyblue',
  points:[{x:100,y:100},{x:150,y:150},{x:50,y:150}]
};

var triangle2={
  name:'triangle2',
  color:'palegreen',
  drawcolor:'palegreen',
  points:[{x:220,y:100},{x:270,y:150},{x:170,y:150}]
};

shapes.push(triangle1,triangle2);

$("#canvas").mousemove(function(e){handleMouseMove(e);});

drawAll();

function drawAll(){
  for(var i=0;i<shapes.length;i++){
    var s=shapes[i];
    defineShape(s.points);
    ctx.fillStyle=s.drawcolor;
    ctx.fill();
    ctx.stroke();
    if(s.color!==s.drawcolor){
      ctx.fillStyle='black';
      ctx.fillText(s.name,s.points[0].x,s.points[0].y);
    }
  }
}


function defineShape(s){
  ctx.beginPath();
  ctx.moveTo(s[0].x,s[0].y);
  for(var i=1;i<s.length;i++){
    ctx.lineTo(s[i].x,s[i].y);
  }
  ctx.closePath();
}

function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // clear the canvas
  ctx.clearRect(0,0,cw,ch);

  for(var i=0;i<shapes.length;i++){
    var s=shapes[i];

    // define the shape path we want to test against the mouse position
    defineShape(s.points);
    // is the mouse insied the defined shape?
    if(ctx.isPointInPath(mouseX,mouseY)){
      // if yes, fill the shape in red
      s.drawcolor='red';
    }else{
      // if no, fill the shape with blue
      s.drawcolor=s.color;
    }

  }

  drawAll();
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover the mouse over the shape.</h4>
<canvas id="canvas" width=300 height=300></canvas>

这篇关于HTML画布悬停文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！