キネティックで構築されたステージ/キャンバスがあり、今のところ、必要なものを達成しています...しかし、ユーザーが同じページと送信時にフォームに入力できるように、動的にする必要があります。入力は JavaScript に送信され、キャンバス ステージに表示されます。これまでのところ、キャンバス表示を処理する同じスクリプトで JavaScript の getElementById を使用することはできませんでした... 誰か助けてくれませんか?
ありがとう
キネティックで構築されたステージ/キャンバスがあり、今のところ、必要なものを達成しています...しかし、ユーザーが同じページと送信時にフォームに入力できるように、動的にする必要があります。入力は JavaScript に送信され、キャンバス ステージに表示されます。これまでのところ、キャンバス表示を処理する同じスクリプトで JavaScript の getElementById を使用することはできませんでした... 誰か助けてくれませんか?
ありがとう
他の誰かがこの問題を抱えている場合に備えて (私のように ;p)、javascript 変数とキネティック JS の node.setText プロパティを使用してキャンバスを更新するフィドルを次に示します。
http://jsfiddle.net/skye/zBUQs/1/
//Make a variable to hold the updatable canvas text//
var newName = 'some text to look at';
//Create canvas text with variable inside it
var complexText = new Kinetic.Text({
x: 30,
y: 50,
text: newName,
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 380
});
//Add text to layer
layer.add(complexText);
//Add layer to stage
stage.add(layer);
//On button click
$('#updateBtn').click(function (e) {
//change the value of newname to the input value
newName = $('#name').val();
//insert the new value into the canvas text
complexText.setText(newName);
//redraw the layer
layer.draw();
});
さて、私がどれだけお手伝いできるかはわかりますが、どうぞ..私のソリューションはPHP/AJAX/jQuery/Kineticを使用して実装されています....まだ完全なソリューションでは完了していません。私が達成しようとしているのは、ユーザーがフォームに入力し、送信時に、PHP が値をキネティック キャンバスに渡すことです。以下は、テキスト レイヤーを作成するために使用するものです。テキスト文字列を出力するための小さなphp..
var companyMessage = new Kinetic.Text({
x: 5,
y: 35,
fill: 'transparent',
text: '<?php echo $coy_messg ?>', // php code wrapped between php tags
fontSize: 14,
fontFamily: 'Georgia',
textFill: '#555',
padding: 4,
align: 'center',
fontStyle: 'normal',
cornerRadius: 0,
draggable: true,
});
// add cursor styling
companyMessage.on('mouseover', function() {
document.body.style.cursor = 'move';
});
companyMessage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
これは役に立ちますか?