单击矩形笔划上的事件 [英] Click event on the stroke of a rectangle

问题描述

我想仅在矩形的笔划上添加click事件，并避免在矩形内部单击。

i want to add the click event only on the stroke of the rectangle and avoid the click inside the rectangle.

以下代码如下：

    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/

推荐答案

经过大量研究后我找到了解决问题的方法。使用fillStrokeShape（this）的状态可以在drawHitFunc（）中使用strokeShape（this）。希望它对其他人也有帮助

After doing lots of research i found the way to solve my problem.Instate of using fillStrokeShape(this) you can use strokeShape(this) in drawHitFunc() . Hope it helps for other as well

答案如下：

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/

JSFiddle: http://jsfiddle.net/bijaybhandari1989/6N3PB/2/

这篇关于单击矩形笔划上的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！