Click event on the stroke of a rectangle

问题

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({
    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);

and the fiddle : jsfiddle.net/6N3PB/

回答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 = 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:

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>
    <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>

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

来源：https://stackoverflow.com/questions/20758791/click-event-on-the-stroke-of-a-rectangle

标签

javascript

html5-canvas

kineticjs