矩形笔划上的单击事件答案

【问题标题】：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/

【问题讨论】：

标签： javascript html5-canvas kineticjs

【解决方案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>
body{padding: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