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 kineticjs？

Answer 1

最好的解决方案是使用简单的JavaScript提示符：

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

请参阅此主题中的答案：editable Text option in kinetic js

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()));

在html5中使用canvas kinetic绘制许多文本并编辑它们

2 个答案: