kineticjs添加元素到舞臺

我是JS和KineticJS的新手，想知道是否有人可以幫助我理解Kinetic.Stage節點的工作原理。我已經使用this tutorial作爲起始位置 - 但希望能夠通過單擊按鈕將對象（例如新的Kinetic.Text（）或新的Kinetic.Group（））追加到現有舞臺上。kineticjs添加元素到舞臺

我想要做的一個例子是在畫布旁邊有一個窗體，允許用戶輸入文本，單擊「去」，並讓「輸入的文本」出現在畫布內。

我試圖申報「無功階段」的的document.ready內，在全球範圍內，想我可以從一個函數內部訪問階段，例如：

function writeTextToStage(stage) { 
    var text = new Kinetic.Text({ 
     x: 190, 
     y: 15, 
     text: 'Simple Text', 
     fontSize: 30, 
     fontFamily: 'Calibri', 
     textFill: 'green' 
    }); 
     var layer = new Kinetic.Layer(); 
     layer.add(text); 
     stage.add(layer); 
     stage.draw(); 
} 

window.onload = function(){ 
    var stage = new Kinetic.Stage({ 
     container: "designer", 
     width: 578, 
     height: 520 
    }); 
    var go = document.getElementById('go'); 
    go.addEventListener('mousedown', writeTextToCanvas(stage); 
};

不管怎麼說，如果「stage」對象是在另一個函數中聲明的 - 「initStage（）」，是否有可能在初始化階段節點之後獲取它以附加事物？我嘗試通過DOM元素$（'kineticjs-content'）。children（）[0]來訪問它。

請協助。 kineticjs.com上的文檔不是很詳細。謝謝！

來源

2012-12-04 Micah Detamore

最後一行缺少括號 - 'go.addEventListener（「鼠標按下」，writeTextToCanvas（ stage））;' – Nucleon

謝謝，非常感謝幫助，但是代碼或多或少只是我想要做的一個例子，而不是我正在使用的代碼。我更加好奇它是否可以在創建階段後添加圖層。 –

你想追加什麼舞臺，爲什麼？上面的代碼看起來很好（除了缺少的括號），所以不知道你在這裏做什麼。 – Ani

你需要你的函數之外創建的圖層，然後在你的函數只是文本添加到層...

function AddText() { 
    var text = new Kinetic.Text({ 
    ... 
    }); 
    layer.add(text); 
}

來源

2012-12-05 21:34:25

kineticjs添加元素到舞臺

回答

相關問題