当我点击卡片上的文字时，我希望能够像这个网站一样编辑文字：
这是我的代码：
$(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 来做到这一点？