Click Event On The Stroke Of A Rectangle

July 25, 2024 Post a Comment

i want to add the click event only on the stroke of the rectangle and avoid the click inside the rectangle. Here is the code below: var stage = new Kinetic.Stage({ contain

Solution 1:

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

The answer is below:

var stage = newKinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});
var layer = newKinetic.Layer();
var rect = newKinetic.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/

Solution 2:

Create a group that contains a stroked rect and a filled rect.

Listen for click event on the stroked rect.

Example code and a Fiddle: http://jsfiddle.net/m1erickson/MdwHA/

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Prototype</title><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><scriptsrc="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 = newKinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = newKinetic.Layer();
    stage.add(layer);


    var group=newKinetic.Group({
        x:20,
        y:20,
        draggable:true
    });
    layer.add(group);

    var rectStroke = newKinetic.Rect({
        x:0,
        y:0,
        width:60,
        height:40,
        stroke: 'black',
        strokeWidth: 10,
    });
    rectStroke.on("click",function(){
        alert("clicked");
    });
    group.add(rectStroke);

    var rectFill = newKinetic.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><divid="container"></div></body></html>

[ Alternately using math to eliminate the fill ]

Demo: 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");
    });

javascript dox

Click Event On The Stroke Of A Rectangle

Solution 1:

Solution 2:

Post a Comment for "Click Event On The Stroke Of A Rectangle"