如何在画布中插入图像，然后在此画布中插入文本？ [英] How to insert an image in canvas and after that insert text in this canvas?
问题描述
我试图在画布中插入一个图像，然后我想在同一个画布中插入一个输入文本，但我不能这样做。我如何解决这个问题？
现在，我想让用户在实际画布中插入一个可拖动的文本。人们说使用和jQuery来简化任务。
这是它的工作原理：
- 创建Kinetic阶段（这会激活 HTML 画布）
- 在 JavaScript 中创建一个新的图片对象（这会加载您的
- 当用户在文本框中输入文本时，会将新的图像放入Kinetic Image对象中。输入并点击添加按钮...
- 使用用户的文本创建新的Kinetic Label对象
- 要使新文本标签可拖动在创建对象时设置
draggable：true
所有工作...
创建动力阶段（这将激活HTML画布）
var stage = new Kinetic.Stage（{
container：'container'，
width：300，
height：300
}） ;
var layer = new Kinetic.Layer（）;
stage.add（layer）;
使用JavaScript创建一个新的图像对象（将图像加载到对象中） strong>
var image = new Image（）;
image.onload = function（）{
//您的映像已完全加载，因此...
//此处创建您的运动图像对象
layer.add（image1）;
layer.draw（）;
}
image.src =koolaidman.png;
创建一个新的Kinetic Image对象， strong>
var image = new Image（）;
image.onload = function（）{
var image1 = new Kinetic.Image（{
x：0，
y：0，
width：300，
height：300，
image：image，
}）;
layer.add（image1）;
layer.draw（）;
}
image.src =koolaidman.png;
当用户在输入中键入文本并点击添加按钮...
< input id =newtexttype =textvalue =Hello！
< button id =addbutton>添加此文本< / button>
$（＃addbutton）click（function（）{
//在这里创建新的动态文本标签
}
使用用户文本创建一个新的Kinetic Label对象
$（＃addbutton）click（function（）{
//简单标签
var label = new Kinetic.Label（{
x：20，
y：20，
draggable：true
}）;
label.add Kinetic.Text（{
fill：'green'
}））;
label.add（new Kinetic.Text（{
text：$（ newtext）。val（），
fontFamily：'Verdana'，
fontSize：18，
padding：10，
fill：'white'
} ;
layer.add（label）;
layer.draw（）;
}）;
要使新文本标签可拖动，只需设置 draggable： true $>
//从创建动态标签时截取
var label = new Kinetic.Label（{
x：20，
y：20，
//设置draggable：true以使动态标签可拖动
draggable：true
}）;
您可以下载Kinetic库，并在 HTML5 Canvas KineticJS Label Tutorial 。您可以通过 jQuery主页下载jQuery库并了解更多示例。 jQuery是一个伟大的库，用于消除跨浏览器不一致。
这里是代码和小提琴： http://jsfiddle.net/m1erickson/pQYz9/
< ;！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Prototype< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< script src =http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js>< / script>
< style>
#container {
border：solid 1px #ccc;
margin-top：10px;
width：300px;
height：300px;
}
< / style>
< script>
$（function（）{
$（＃addbutton）click（function（）{
//简单标签
var label = new Kinetic.Label b $ bx：20，
y：20，
draggable：true
}）;
label.add（new Kinetic.Tag（{
fill ：'green'
}））;
label.add（new Kinetic.Text（{
text：$（＃newtext）。 $ b fontFamily：'Verdana'，
fontSize：18，
padding：10，
fill：'white'
}））;
.add（label）;
layer.draw（）;
}）;
}）; // End $（function（）{}）;
< / script>
< / head>
< body>
< input id =newtexttype =textvalue =Hello！>
< button id =addbutton>添加此文本< / button>
< div id =container>< / div>
< / body>
< / html>
I'm trying to insert an image in a canvas and after that I want to insert an input text in the same canvas, but I can't do it. How can I fix this problem?
Now, I want that the user insert a draggable text in the actual canvas. The people say that using Fabric.js is easy, but I can't get it working:
canvas = document.getElementById("canvasThumbResult");
var context = canvas.getContext("2d");
var img = document.getElementById("target");
context.drawImage(img, getX, getY, getWidth, getHeight, 0, 0, 238.11023622,332.598425197);
Here is how to add user-specified text on an image and allow the text to be dragged
This solution uses a canvas library called KineticJS and jQuery to simplify the task.
Here’s how it works:
- Create the Kinetic Stage (this activates the HTML canvas)
- Create a new image object in JavaScript (this loads your image into an object)
- Create a new Kinetic Image object and put your new image in the Kinetic Image object
- When the user types text in the input and hits the "Add" button…
- Create a new Kinetic Label object using the user’s text
- To make the new text label draggable, just set
draggable:truewhen creating the object
Here’s the code that makes it all work…
Create the Kinetic Stage (this activates the HTML canvas)
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
Create a new image object in JavaScript (this loads your image into an object)
var image = new Image();
image.onload = function(){
// Your image is fully loaded, so…
// Create your kinetic image object here
layer.add(image1);
layer.draw();
}
image.src="koolaidman.png";
Create a new Kinetic Image object and put your new image in the Kinetic Image object
var image = new Image();
image.onload = function(){
var image1 = new Kinetic.Image({
x: 0,
y: 0,
width: 300,
height: 300,
image: image,
});
layer.add(image1);
layer.draw();
}
image.src = "koolaidman.png";
When the user types text in the input and hits the "Add" button…
<input id="newtext" type="text" value="Hello!">
<button id="addbutton">Add this text</button>
$("#addbutton").click(function(){
// Create your new kinetic text label here
});
Create a new Kinetic Label object using the user’s text
$("#addbutton").click(function(){
// Simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable:true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
layer.add(label);
layer.draw();
});
To make the new text label draggable, just set draggable:true when creating the object
// Snipped from the kinetic label creation above
var label = new Kinetic.Label({
x: 20,
y: 20,
// Set draggable:true to make the kinetic label draggable
draggable:true
});
You can download the Kinetic library and learn more with examples in HTML5 Canvas KineticJS Label Tutorial. You can download the jQuery library and learn more with examples here at the jQuery home page. jQuery is a great library for eliminating cross-browser inconsistencies.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/pQYz9/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
$("#addbutton").click(function(){
// Simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable:true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
layer.add(label);
layer.draw();
});
}); // End $(function(){});
</script>
</head>
<body>
<input id="newtext" type="text" value="Hello!">
<button id="addbutton">Add this text</button>
<div id="container"></div>
</body>
</html>
这篇关于如何在画布中插入图像，然后在此画布中插入文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
