[英]kineticjs move image on button click
我正在使用此示例创建画布等。我想做的是通过单击按钮移动yodaGroup
或yodaImage
的位置。 有没有人做过或知道如何做?
这是我的位置。
var yodaGroup = new Kinetic.Group({
x: 250,
y: 30,
draggable: true
});
我想使用触发以下功能的按钮单击来调整或添加到上述yodaGroup的x和y坐标
//需要弄清楚这个函数,这只是一个例子,因为我不知道如何为上面的yodaGroup定义,因为它没有绑定的ID或类。
function left() {
yodaGroup.x += 5; // move image by 5px
}
有一种比设置位置更简单的方法。 其.move()函数。
.move(x,y)在对象上移动给定的数量x和y。
所以这可能是:
function left() {
yodaGroup.move(-5,0);
}
function right() {
yodaGroup.move(5,0);
}
function up() {
yodaGroup.move(0,-5); //negative is up in canvas
}
function down() {
yodaGroup.move(0,5); //positive is down in canvas
}
这比两次调用getPosition并在之后设置位置要快得多。 另外,setPosition比移动需要更多的资源和处理。
我不确定“ x”属性是否公开。 根据API,您应该使用setPosition()方法: http : //kineticjs.com/docs/symbols/Kinetic.Node.php#setPosition
我会尝试类似的东西:
<button data-direction="right" value=">">
<button data-direction="left" value="<">
Javascript(使用jQuery):
var yodaGroup = new Kinetic.Group({
x: 250,
y: 30,
draggable: true
});
var step = 5;
$('button [data-direction=right]').click(function() {
yodaGroup.setPosition(yodaGroup.getPosition().x + step, yodaGroup.getPosition().y);
});
$('button [data-direction=left]').click(function() {
yodaGroup.setPosition(yodaGroup.getPosition().x - step, yodaGroup.getPosition().y);
});
最终使用了它...并使其正常工作
html
<div class="positionImage">
<input type="button" value="left" id="left" >
<input type="button" value="right" id="right" >
<input type="button" value="up" id="up" >
<input type="button" value="down" id="down" >
</div>
脚本
// zoom by scrollong
document.getElementById("container").addEventListener("mousewheel", function(e) {
var zoomAmount = e.wheelDeltaY*0.0001;
yodaGroup.setScale(yodaGroup.getScale().x+zoomAmount)
layer.draw();
e.preventDefault();
}, false)
// move down
document.getElementById("down").addEventListener("click", function(e) {
yodaGroup.move(0,5);
layer.draw();
e.preventDefault();
}, false)
// move right
document.getElementById("right").addEventListener("click", function(e) {
yodaGroup.move(5,0);
layer.draw();
e.preventDefault();
}, false)
// move up
document.getElementById("up").addEventListener("click", function(e) {
yodaGroup.move(0,-5);
layer.draw();
e.preventDefault();
}, false)
// move left
document.getElementById("left").addEventListener("click", function(e) {
yodaGroup.move(-5,0);
layer.draw();
e.preventDefault();
}, false)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.