首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >根据画布的部分更改光标

根据画布的部分更改光标
EN

Stack Overflow用户
提问于 2015-07-19 04:37:30
回答 2查看 22.7K关注 0票数 22

我有一个画布,我想改变用户的光标(如样式,光标,指针,十字准线,移动等)。是否可以在用户光标位于画布上的某个区域时更改用户光标,而不在这些点击框上引入带有光标样式的“点击框”?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-19 14:29:49

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

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

代码语言:javascript
运行
复制
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();

要在光标悬停在各个形状上时更改光标,必须对每个形状(对每个路径)进行鼠标点击测试。

可以使用isPointInPath方法对形状(路径)进行命中测试。

要使用isPointInPath,必须重新发出形状的路径命令(但不需要描边或填充),然后使用当前鼠标坐标调用isPointInPath

代码语言:javascript
运行
复制
// 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');
}

这里有示例代码和演示:

代码语言:javascript
运行
复制
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];              
  }
}
代码语言:javascript
运行
复制
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
代码语言:javascript
运行
复制
<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>

票数 39
EN

Stack Overflow用户

发布于 2019-01-17 15:29:42

您也可以在JQUERY中实现此功能,如下所示:

代码语言:javascript
运行
复制
$( ".chrt" ).mouseover(function() {
  alert('you are over and put your code in this');
});

其中您的html代码是:

代码语言:javascript
运行
复制
<div class="col-lg-4 chrt">
     <div class="panel panel-default">
       <canvas id="myChart2" width="200" height="100"></canvas>
     </div>
</div>
票数 -3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31495344

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档