使用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 kineticjs来做到这一点？

Answer 1

你不能直接在画布上编辑文本，但你可以做的是用事件改变它。因此，您需要的是在画布旁边创建的输入窗体，并且您可以使用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())); 

Answer 2

最好的解决方案恕我直言，是使用一个简单的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