根据 canvas 的部分更改光标
Change cursor depending on section of canvas
我有一个 canvas,我想更改用户光标(如样式光标指针十字线移动等)。
是否可以在用户光标位于我的 canvas 的特定区域时更改用户光标,而无需在这些命中框上引入带有光标样式的“命中框”?
在 canvas 上绘制的形状不会单独接收鼠标事件,因此单个形状无法接收悬停事件。
在canvas上绘制的形状可以表示为一组路径命令
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
:
// 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');
}
这是示例代码和演示:
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>
您也可以在 JQUERY 中实现此功能,例如:
$( ".chrt" ).mouseover(function() {
alert('you are over and put your code in this');
});
您的 html 代码是:
<div class="col-lg-4 chrt">
<div class="panel panel-default">
<canvas id="myChart2" width="200" height="100"></canvas>
</div>
</div>
我有一个 canvas,我想更改用户光标(如样式光标指针十字线移动等)。
是否可以在用户光标位于我的 canvas 的特定区域时更改用户光标,而无需在这些命中框上引入带有光标样式的“命中框”?
在 canvas 上绘制的形状不会单独接收鼠标事件,因此单个形状无法接收悬停事件。
在canvas上绘制的形状可以表示为一组路径命令
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
:
// 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');
}
这是示例代码和演示:
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>
您也可以在 JQUERY 中实现此功能,例如:
$( ".chrt" ).mouseover(function() {
alert('you are over and put your code in this');
});
您的 html 代码是:
<div class="col-lg-4 chrt">
<div class="panel panel-default">
<canvas id="myChart2" width="200" height="100"></canvas>
</div>
</div>