我正在尝试制作一个动态画布,我可以在其中动态添加来自另一个来源的图片,并且我希望在背景中有一个网格,所以我使用了 kinetic v3.8.2 中的 kinetic.rect。图像需要是可拖动的,从动力学 v.3.6.0 开始,但如果我在激活 v3.8.2 时设置可拖动,它会中断。根据 FireBug,“配置未定义”。“img.kinetic.draggable 不是一种方法”,FireBug 说。
有解决办法吗?
我正在尝试制作一个动态画布,我可以在其中动态添加来自另一个来源的图片,并且我希望在背景中有一个网格,所以我使用了 kinetic v3.8.2 中的 kinetic.rect。图像需要是可拖动的,从动力学 v.3.6.0 开始,但如果我在激活 v3.8.2 时设置可拖动,它会中断。根据 FireBug,“配置未定义”。“img.kinetic.draggable 不是一种方法”,FireBug 说。
有解决办法吗?
你能发布一个小例子吗?Kinetic API 发生了变化。这是 3.8.2 的可拖动图像:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='js/kinetic/kinetic-v3.8.2.js'></script>
<script type='text/javascript'>
window.onload = function () {
var stage = new Kinetic.Stage('container', 400, 300);
var layer = new Kinetic.Layer({
name: 'someLayer'
});
var logo = new Image();
logo.onload = function() {
var myImage = new Kinetic.Image({
x: stage.width / 2 - (logo.width / 2)
, y: stage.height - logo.height - 5
, image: logo
, width: logo.width
, height: logo.height
});
myImage.draggable(true)
layer.add(myImage);
layer.draw();
}
logo.src = "\./resources/images/ccs_logo.png";
stage.add(layer)
}
</script>
</head>
<body onmousedown="return false;" bgcolor=#000000>
<div id="container">
</div>
</body>
</html>
最值得注意的是,最近为类实例化引入了配置。一个动力学矩形过去是这样定义的:
var rect = new Kinetic.Rectangle(function () {
//do drawing stuff here
});
但现在它是用一个配置(一个对象文字)定义的:
var rect = new Kinetic.Rectangle({
x: 0,
y: 0,
height: 20,
width: 20
});
您可以在文档中查看示例;还可以查看更新的KineticJS 教程。