kineticjs按鈕點擊

移動圖像我使用this example創建一個帆布等，我想這樣做的是通過點擊按鈕移動yodaGroup或yodaImage的位置。有沒有人做過這個或知道如何做到這一點？kineticjs按鈕點擊

這是我在哪裏。

var yodaGroup = new Kinetic.Group({ 
     x: 250, 
     y: 30, 
     draggable: true 
    });

我想調整或使用點擊一個按鈕觸發以下

//需要弄清楚這個功能這此功能添加到x和y cordinates爲yodaGroup上述只是一個例如，我不知道如何定義上面的yodaGroup，因爲它沒有綁定的id或class。

function left() { 
     yodaGroup.x += 5; // move image by 5px 
    }

來源

2013-01-04 Bowenac

我做了使用kineticJS有點項目，讓我知道你是否想要一些幫助。我的項目是在http://physiks.netii.net – SoluableNonagon

是的，會愛的幫助...我只是想獲得一個html5畫布使用圖像，並能夠移動和按鈕點擊調整大小。只是調整大小會很好。我發現了一個不同的例子，他們使用按鈕縮放這是我需要的，但我無法使它與圖像一起工作......這就是這裏。 http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/ – Bowenac

我不確定「x」屬性是否公開。根據API，你應該使用setPosition（）方法：http://kineticjs.com/docs/symbols/Kinetic.Node.php#setPosition

我會嘗試這樣的：

<button data-direction="right" value="&gt;"> 
<button data-direction="left" value="&lt;">

的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); 
});

來源

2013-01-04 22:23:47 Maks

謝謝，但似乎沒有做任何事情我得到$未定義在鉻安慰。 – Bowenac

你需要jQuery http://code.jquery.com/jquery-1.8.3.min.js或者只使用vanilla js：document.querySelector（...）。addEventListener（'click'，function（）{.. 。}）; – Maks

我走了一條不同的路線。 – Bowenac

沒有比一個更簡單的方法設置位置。它的.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比移動需要更多的資源和處理。

http://kineticjs.com/docs/symbols/Kinetic.Node.php#move

來源

2013-01-04 22:43:21 SoluableNonagon

如果你想將圖像/組移動到某個位置，那麼你可以使用.setPosition（x，y） – SoluableNonagon

我會在今天晚些時候嘗試這些，當我回家。幾天以前出城。感謝您的建議。 – Bowenac

試過這些建議仍然無法讓它移動...始終未定義yodaImg或yodaGroup未定義。任何其他的建議，任何人都知道如何將畫布繪製成div ID或類...如果我可以這樣做，我可以使用畫布，並使用CSS點擊功能來移動圖像。提前致謝。 – Bowenac

結束了使用此...並得到它的工作

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)

來源

2013-01-07 22:09:46 Bowenac

kineticjs按鈕點擊

回答

相關問題