矩形笔划上的单击事件
Posted
技术标签:
【中文标题】矩形笔划上的单击事件【英文标题】：Click event on the stroke of a rectangle 【发布时间】：2014-01-12 13:44:02 【问题描述】：我只想在矩形的笔划上添加点击事件，并避免在矩形内点击。
下面是代码：
var stage = new Kinetic.Stage(
container: 'container',
width: 578,
height: 200
);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect(
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
);
rect.on('click', function ()
var fill = this.getFill() == 'red' ? '#00d00f' : 'red';
this.setFill(fill);
layer.draw();
);
layer.add(rect);
stage.add(layer);
还有小提琴：jsfiddle.net/6N3PB/
【问题讨论】：
【参考方案1】：经过大量研究后，我找到了解决问题的方法。在使用 fillStrokeShape(this) 的状态下，您可以在 drawHitFunc() 中使用 strokeShape(this)。希望对其他人也有帮助
答案如下：
var stage = new Kinetic.Stage(
container: 'container',
width: 578,
height: 200
);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect(
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
drawHitFunc: function (context)
var width = this.getWidth(),
height = this.getHeight();
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
context.strokeShape(this);
);
rect.on('click', function ()
var fill = this.getFill() == 'red' ? '#00d00f' : 'red';
this.setFill(fill);
layer.draw();
);
layer.add(rect);
stage.add(layer);
JSFiddle：http://jsfiddle.net/bijaybhandari1989/6N3PB/2/
【讨论】：
【参考方案2】：创建一个包含描边矩形和填充矩形的组。
在被描边的矩形上监听点击事件。
示例代码和小提琴：http://jsfiddle.net/m1erickson/MdwHA/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
bodypadding:20px;
#container
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
</style>
<script>
$(function()
var stage = new Kinetic.Stage(
container: 'container',
width: 350,
height: 350
);
var layer = new Kinetic.Layer();
stage.add(layer);
var group=new Kinetic.Group(
x:20,
y:20,
draggable:true
);
layer.add(group);
var rectStroke = new Kinetic.Rect(
x:0,
y:0,
width:60,
height:40,
stroke: 'black',
strokeWidth: 10,
);
rectStroke.on("click",function()
alert("clicked");
);
group.add(rectStroke);
var rectFill = new Kinetic.Rect(
x:0,
y:0,
width:60,
height:40,
fill: 'skyblue'
);
group.add(rectFill);
layer.draw();
); // end $(function());
</script>
</head>
<body>
<h4>Click the rect stroke</h4>
<div id="container"></div>
</body>
</html>
[交替使用数学消除填充]
演示：http://jsfiddle.net/m1erickson/RN3g9/
rect.on("click",function()
var stroke=this.getStrokeWidth();
var x=this.getX()+stroke/2;
var y=this.getY()+stroke/2;
var w=this.getWidth()-stroke;
var h=this.getHeight()-stroke;
var pos=stage.getMousePosition();
var mx=pos.x;
var my=pos.y;
if(mx>x && mx<x+w && my>y && my<y+h )return;
alert("clicked");
);
【讨论】：
这不是我想要的，但感谢您的回答。有没有其他方法可以使用 drawHitfunc().@markE 您可以使用 drawHitFunc 创建一个跟踪笔画外边缘和内边缘的路径。或者，在笔划+填充矩形的点击事件中，使用数学来确定点击是否在笔划内。或者，使用 kinetic.shape 然后使用 context.isPointInStroke 来测试笔画（一些浏览器支持问题）。或者，获取舞台上的点击坐标，然后使用数学来测试笔画。有很多方法可以实现你的目标——我会和团队一起做。题外话：我叔叔几年前是加德满都郊外的一名护林员。 该小组不是我的选择，我的项目不允许这样做，所以我正在寻找另一种方法来做到这一点。很高兴听到你叔叔在加德满都工作。圣诞快乐祝你节日快乐 祝您和您的家人节日快乐。这是另一种方法，它监听矩形中的点击，但消除矩形填充部分的点击：jsfiddle.net/m1erickson/RN3g9以上是关于矩形笔划上的单击事件的主要内容，如果未能解决你的问题，请参考以下文章
QGraphicsItem 的子类仅从边界矩形接收边框上的悬停事件
使用 python 在打开的 cv 中使用鼠标事件绘制矩形或线条