在html5中使用畫布動力學繪制許多文本並進行編輯

Question

當我單擊卡上的文本時，我希望能夠像以下網站一樣編輯文本：

http://www.vistaprint.com/vp/ns/studio3.aspx?pf_id=064&combo_id=120585&free_studio_gallery=true&referer=http%3a%2f%2fwww.vistaprint.com%2fvp%2fns%2fdefault.aspx%3fdr%3d1% 26rd％3d1％26GNF％3d0％26GP％3d5％252f19％252f2012％2b12％253a36％253a37％2bAM％26GPS％3d2448654652％26GNF％3d1％26GPLSID％3d＆rd = 1

這是我的代碼：

$(document).ready(function () {

    var Total_layers = 0;

    var Text = {};
    /*set up stage for drawing image*/
    var stage = new Kinetic.Stage({
        container: "container",
        width: 600,
        height: 400
    });
    // var Layer = {};
    /*create a layer object for placing text image over it and place it over the stage*/
    var layer = new Kinetic.Layer();
    //Layer[Total_layers]
    /*Text Property*/
    var New_Text = "Company Name";
    var Text_Font = "Arial";
    var Text_Color = "Black";

    var Text_Size = "30";
    var Text_Pos_X = 200;
    var Text_Pos_y = 100;
    var Selected_Text = new Kinetic.Text({});
    var current_layer = 0;
    // var text_selected = 1;

    /*Add event for them*/
    //var formElement = document.getElementById("New Text");

    // formElement.addEventListener('change', Text_Changed, false);

    var formElement = document.getElementById("selectFontSize");
    formElement.addEventListener('change', Text_Size_Changed, false);
    /*This Function will be Executed when the Size of the Text in consideration is changed*/
    function Text_Size_Changed(e) {
        var target = e.target;
        Text_Size = target.value;
        Text_Pos_X = 200; //Text[Total_layers].x;
        Text_Pos_Y = 100; //Text[Total_layers].y;
        //DeleteLayer(Total_layers);
        layer.remove(Selected_Text);
        Draw_text(Total_layers);
    }

    /*Function to swap the Kinetic Text object and get the selected Text object to The Top*/
    function swap_layers(Selected_text) {

        var temp = new Kinetic.Text({});

        for (var i = 1; i <= Total_layers; i++) {

            if (Text[i] == Selected_text) {

                temp = Text[i];
                Text[i] = Text[Total_layers];
                Text[Total_layers] = temp;
                break;
            }
        }
    }

    /*Add different Events to the Text objects once They are instantiated*/

    function add_events(dest_Text) {

        dest_Text.on("mouseover", function () {
            document.body.style.cursor = "pointer";
        });
        dest_Text.on("mouseout", function () {
            document.body.style.cursor = "default";
        });
        dest_Text.on("click", function () {

            $("#selectFontSize").change(function () {
                dest_Text.setFontSize($("#selectFontSize").val());
                layer.draw(); // vì gọi layer.draw nên tất cả text trong layer đó đều dc vẽ lại 
            });
            $("#selectFontFamily").change(function () {
                swap_layers(dest_Text);
                //dest_Text.setFontFamily($("#selectFontFamily").val());

                //layer.draw();
            });

        });

    }

    /*Draw the Text over the layer depening upon the Text_object_Number*/
    function Draw_text(Text_object_Number) {

        /*Set the Properties of the Topmost object that is been modified and which will be added to the layer*/
        Text[Text_object_Number] = new Kinetic.Text({

            x: Text_Pos_X,
            y: Text_Pos_Y,
            text: New_Text,
            fontSize: Text_Size,
            fontFamily: Text_Font,
            textFill: Text_Color,
            align: "center",
            verticalAlign: "middle",
            draggable: "true"

        });

        /*Adds all the Text objects onto the layer and adds the events to every Text object */
        //for (var i = 1; i <= Text_object_Number; i++) {
        layer.add(Text[Text_object_Number]);
        add_events(Text[Text_object_Number]);
        //}
        stage.add(layer);
    }
    $("#add_text").click(function () {
        Total_layers++;
        Text[Total_layers] = new Kinetic.Text({
            x: Text_Pos_X,
            y: Text_Pos_y,
            text: New_Text,
            fontSize: 30,
            fontFamily: Text_Font,
            textFill: Text_Color,
            align: "center",
            verticalAlign: "middle",
            draggable: "true"
        });
        add_events(Text[Total_layers]);
        layer.add(Text[Total_layers]);
        stage.add(layer);
    });

    /*Adding an image to the present Context*/
    var imageObj = new Image();
    //alert("abc");
    imageObj.onload = function () {
        var T_shirt = new Kinetic.Image({
            x: 60,
            y: 0,
            image: imageObj,
            width: 550,
            height: 400,
            name: "image"
        });

        layer.add(T_shirt);
        stage.add(layer);
    }
    imageObj.src = "../../Content/Image/imagepreview1.jpg";
});

我已經嘗試了許多方法，但是仍然無法解決此問題。

如何在html5中使用canvas dynamicjs做到這一點？

Answer 1

恕我直言，最好的解決方案是使用一個簡單的JavaScript提示符：

myText.on('click', function(evt) {
    this.setText(prompt('New Text:'));
    layer.draw(); //redraw the layer containing the textfield
});

在此線程中查看我的答案： 動態js中的editable Text選項

Answer 2

您不能直接在畫布上編輯文本，但是可以通過事件對其進行更改。 因此，您需要的是在畫布旁邊創建的輸入表單，您可以使用javascript從表單中讀取內容。

 <input type=text id=changeText/>

這樣，當您單擊某些文本時，將出現一個新的輸入標簽，您可以鍵入它，並且畫布內的文本將隨着您的輸入而改變。

 mytext.on('click', function(){ ... create new input element at the side ... });
 //add some jQuery
 $('#changeText').onchange( mytext.setText($('$changeText').val()));