javascript – 在矩形笔划上单击事件

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

以下是代码：

    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).希望它对其他人也有帮助

答案如下：

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/

标签：javascript,html5-canvas,kineticjs
来源： https://codeday.me/bug/20190624/1280842.html