我想添加Textbox或可編輯元素，以使用戶可以選擇編輯文本。可編輯動態js中的文本選項
這是我當前的代碼：
var text = new Kinetic.Text({
text: "Sample Text", ---> i want to edit this text
x: 50,
y: 10,
fill: "transparent",
fontSize: 10,
fontFamily: "Helvetica Neue",
textFill: "#000",
align: "center",
verticalAlign: "middle",
name:'TEXT'
});
目前似乎沒有要任何方法來創建可編輯的文本與動力學JS（看到這個在計算器幾個線程），利用有些人建議旁邊的畫布上輸入字段編輯的文本，但我的解決辦法是以下幾點：
那麼，這就是計劃。也許在輸入欄中使用「保存」按鈕文本更容易，因此您可以確切知道何時關閉它以及何時將輸入欄數據存儲到動態文本中。如果你不想編輯它，你還需要一個「關閉」功能。
一個非常簡單的解決方案也將是一個簡單的JavaScript提示：
var xy = prompt("gimme your text");
所以，這樣的事情將是最好的解決方案恕我直言：
myText.on('click', function(evt) {
this.setText(prompt('New Text:'));
layer.draw(); //redraw the layer containing the textfield
});
我已嘗試過用於帶有可編輯文本功能的實際KinetiJS插件。
我知道這是重新發明輪子，當你只能懸停一個textarea，但爲什麼不能只在畫布上。
我這樣做了幾天回到我的項目。兔子是代碼片段。基本上我們首先繪製矩形，然後在其中放置一個文本區域，最後將其轉換爲kinetic.text節點。
drawText: function (color)
{
var layer1=this.model.stage.getLayers()[0];
var $this=this;
console.log('drawText: color: ' + color);
if($this.rectangleDrawn==true)
{
var down = false, oPoint;
layer1.off("mousedown touchstart mousemove touchmove mouseup touchend");
if(group!=undefined && group!='')
{
$this.hideAnchors(group);
}
console.log("textX: "+textX);
//after rectangle is drawn we now have to add the editablesection
$('<textarea id="text" type="text" width='+textWidth +'px height='+textHeight+'px style="font-size: 30px;font-family:Calibri;height:'+textHeight+'px;width:'+textWidth+'px;position:absolute'+';left:'+textX+'px'+';top:'+textY+'px'+';z-index:5'+';background-color:#ffcc00;"></textarea>')
.insertBefore('.kineticjs-content');
$('#text').on('blur',function()
{
console.log("textchange");
text = new Kinetic.Text({
x: textX,
y: textY,
stroke: color,
strokeWidth: 1,
fontSize: 30,
fontFamily: 'Calibri',
clearBeforeDraw: false,
name: 'image'+layer1.getName(),
draggable: true,
height: textHeight,
width: textWidth,
text: $('#text').val()
});
text.on('mouseleave dbltap', function()
{
text=this;
});
$('#text').remove();
layer1.add(text);
layer1.draw();
})
},drawRectangle: function (opacity, colorFill,stroke,textColor){rect = new Kinetic.Rect({
x: mousePos.x,
y: mousePos.y,
width: 0,
height: 0,
stroke: stroke,
strokeWidth: 4,
opacity: opacity,
clearBeforeDraw: false,
name: 'image'+layer1.getName()
});
layer1.on("mouseup touchend", function (e)
{
console.log("rectangle: mouseup");
console.log("width: "+rect.getWidth());
rect.setOpacity(opacity);
rect.setFill(colorFill);
layer1.draw();
down = false;
console.log("textColor: "+textColor)
if(textColor!=undefined)
{
textWidth=rect.getWidth();
textHeight=rect.getHeight();
textX = rect.getAbsolutePosition().x;
textY=rect.getAbsolutePosition().y;
$this.rectangleDrawn=true;
$this.drawText(textColor);
console.log("textdrawn ");
$this.group.remove();
}
},
我正在使用這種方法進行文本編輯。問題在於輸入字段的縮放以及動態階段。當我使用小窗口並縮放舞臺以適應該窗口時，我得到的輸入字段仍然很大。你能爲此提出解決方法嗎？ – Vrishank
我不認爲你可以改變js提示的外觀，它是一個瀏覽器的東西。另一個解決方案是覆蓋html輸入字段。你可以擴展的那個。 – luschn
...雖然...這將是很多更多的工作...迅速的解決方案非常簡單。 – luschn