javascript - tablas - Haga clic en evento en el trazo de un rectángulo
tablas dinamicas html javascript (2)
Quiero agregar el evento click solo en el trazo del rectángulo y evitar el clic dentro del rectángulo.
Aquí está el código a continuación:
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);
y el violín: jsfiddle.net/6N3PB/
Crea un grupo que contenga un rect acarreado y un rect completo.
Escuche el evento de clic en el rect acarició.
Código de ejemplo y un 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>
[Alternativamente usando matemáticas para eliminar el relleno]
Demostración: 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");
});
Después de investigar mucho, encontré la manera de resolver mi problema. Estado de uso de fillStrokeShape (esto) puede usar strokeShape (this) en drawHitFunc (). Espero que ayude a otros también
La respuesta está abajo:
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);