[英]Click Event on a Shape doesn't work in kineticjs
我想在形状上单击事件时打印消息,它根本不会触发,可拖动也无法工作,我该如何工作?有人可以帮忙吗?
JS代码
$(function(){
var stage = new Kinetic.Stage({
container: 'toolbar',
width: $("#gamebox").width(),
height: window.innerHeight * 0.9,
listening: true
});
var layer = new Kinetic.Layer();
stage.add(layer);
var line = new Kinetic.Shape({
drawFunc: function (canvas) {
console.log("shape");
var context = canvas.getContext();
context.beginPath();
context.moveTo(20,5);
context.quadraticCurveTo(10, 35, 20, 60);
context.moveTo(20,5);
context.quadraticCurveTo(30, 35, 20, 60);
canvas.stroke(this);
context.fillStyle = 'black';
context.fill();
},
strokeWidth: 2,
draggable: true
});
line.on('click', function() {
alert("click detected");
});
layer.add(line);
stage.add(layer);
});
HTML代码
<div id="toolbar">
</div>
<div id="gamebox">
</div>
在KineticJS的最新版本(我认为是5.0+)中,将包装的上下文输入到drawFunc中。
请注意,此包装的上下文是画布上下文的子集,并不具有所有画布上下文方法。 例如,合成不可用。
这是一个使用KineticJS 5.1.0的代码的工作示例:
var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); var line=new Kinetic.Shape({ x:0, y:0, stroke:"blue", fill: 'red', drawFunc: function(context) { context.beginPath(); context.moveTo(20,5); context.quadraticCurveTo(10, 35, 20, 60); context.moveTo(20,5); context.quadraticCurveTo(30, 35, 20, 60); context.fillStrokeShape(this); } }); layer.add(line); line.on('click', function() { alert("click detected"); }); layer.draw();
body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; }
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> <h4>Click the shape.</h4> <div id="container"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.