我有这个呼叫功能
$(document).ready(function(){ $('#change-background').click(function(){ layers['map'] = new Kinetic.Layer(); buildMap(layers['map'],'img/test.png'); stage.add(layers['map']); }); });
我有这个函数来显示图像
function buildMap(layer, img_src){ var img = new Image(); img.src = img_src; img.onload = function(e) { var map = new Kinetic.Image({ id: 'map_img', x: 0, y: 0, image: img, draggable: true, dragBoundFunc: function(pos) { // THIS SHOULD EXECUTE console.log('hahaha'); return { x:0, y:0 }; } }); layer.add(map); layer.draw(); }; }
我有一个类似的代码在我的一个单独的项目,它的工作像一个魅力…但很尴尬的是,它在这里不能很好地工作。图像显示在画布中,并且是可拖动的,在本例中不应该拖动,因为我显式返回了{x:0,y:0}
(返回值仅用于测试)。我也看了控制台日志,“哈哈哈”文本从来没有出现…当图像被拖动时,它没有调用该函数。这两者都在
标记内,并且在一个html文档中。
修正此问题:http://jsfidle.net/xplpt/2/
尝试:
dragBoundFunc: function(pos) {
console.log('hahaha'); //check the jsfiddle, this does work.
return {
x: this.getAbsolutePosition().x, //constrain vertically
y: this.getAbsolutePosition().y //constrain horizontally
}
}
还可以通过添加stage.draw();来更改click函数:
$(document).ready(function(){
$('#change-background').click(function(){
//if(layers['map'])
// layers['map'].remove(); // this is optional, but recommended, as it removes the current map layer before adding a new one
layers['map'] = new Kinetic.Layer();
buildMap(layers['map'],'img/test.png');
stage.add(layers['map']);
stage.draw();
});
});
尝试使用较新版本的Kinetics:
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js"></script>