根据画布的部分更改光标 [英] Change cursor depending on section of canvas

问题描述

我有一个画布，我想更改用户光标（像样式光标指针十字线移动等）。是否可以改变用户的光标而不在我的画布的某个区域上，而不在这些命中框上引入光标的风格？

解决方案

在画布上绘制的形状不会单独接收鼠标事件，因此各个形状不能接收悬停事件。

在画布上绘制的形状可以表示为一组路径命令

  A Shape ==一组路径命令。 
 
 //示例：绘制三角形的一组路径命令
 context.beginPath（）; 
 context.moveTo（50,50）; 
 context.lineTo（75,100）; 
 context.lineTo（25,100）; 
 context.closePath（）; 
 

要在将光标悬停在各个形状上时更改光标，必须对每个形状进行鼠标击键测试路径）。

您可以使用 isPointInPath 方法命中测试形状（路径）。

要使用 isPointInPath ，必须重新发出形状的路径命令），然后使用当前的鼠标坐标调用 isPointInPath ：

  //首先重新发布正在测试的形状的路径命令
 //，然后使用isPointInPath 
 if（context.isPointInPath（mouseX，mouseY））测试鼠标是否在形状内部{
 alert（'鼠标在这个形状内'）; 
} 
  

下面是示例代码和演示： p>

  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>将鼠标移动到形状上，光标将变化。< / h4& ; canvas id =canvaswidth = 300 height = 300>< / canvas>  

I have a canvas and I want to change the users cursor (like style cursor pointer crosshair move etc). Is it possible to change the users cursor while its over a certain area of my canvas without introducing "hit boxes" with style of cursor on these hit boxes?

解决方案

Shapes drawn on the canvas do not individually receive mouse events, so individual shapes cannot receive hover events.

A shape drawn on the canvas can be represented as a set of path commands

A Shape == A set of path commands.

// Example: A set of path commands drawing a triangle
context.beginPath();
context.moveTo(50,50);
context.lineTo(75,100);
context.lineTo(25,100);
context.closePath();

To change cursors when hovering over individual shapes you must do mouse hit-testing versus each shape (versus each path).

You can hit-test a shape (a path) using the isPointInPath method.

To use isPointInPath you must re-issue the path command for a shape (but no need to stroke or fill) and then call isPointInPath with the current mouse coordinates:

// first re-issue the path commands for the shape being tested
// and then test if the mouse is inside the shape using isPointInPath
if( context.isPointInPath(mouseX,mouseY) ){
    alert('The mouse is inside this 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(); }

var isDown=false;
var startX,startY;

var cursors=['default','w-resize','n-resize'];
var currentCursor=0;

var shapes=[];
shapes.push({
  points:[{x:20,y:50},{x:100,y:10},{x:180,y:50},{x:100,y:90}],
  cursor:1,
});
shapes.push({
  points:[{x:200,y:50},{x:250,y:150},{x:200,y:250},{x:150,y:150}],
  cursor:2,
});

for(var i=0;i<shapes.length;i++){
  var s=shapes[i];
  definePath(s.points);
  ctx.stroke();
}


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


function definePath(p){
  ctx.beginPath();
  ctx.moveTo(p[0].x,p[0].y);
  for(var i=1;i<p.length;i++){
    ctx.lineTo(p[i].x,p[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);

  // Put your mousemove stuff here
  var newCursor;
  for(var i=0;i<shapes.length;i++){
    var s=shapes[i];
    definePath(s.points);
    if(ctx.isPointInPath(mouseX,mouseY)){
      newCursor=s.cursor;
      break;
    }
  }
  if(!newCursor){
    if(currentCursor>0){
      currentCursor=0;
      canvas.style.cursor=cursors[currentCursor];              
    }
  }else if(!newCursor==currentCursor){
    currentCursor=newCursor;
    canvas.style.cursor=cursors[currentCursor];              
  }
}

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>Move the mouse over the shapes and the cursor will change.</h4>
<canvas id="canvas" width=300 height=300></canvas>

这篇关于根据画布的部分更改光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！