【发布时间】：2017-03-01 08:34:19
【问题描述】：
我很纠结如何将图像拖到画布上。 到目前为止，我能够很好地拖动文本...... 但是每次我发布新的奉献时都会触发删除我的图像..
我对刚刚得到的代码感到非常困惑。
这是我的代码：
function updateTotal() {
if (document.getElementById('fig1').checked)
{ var context = document.getElementById('display').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ context.drawImage(imageObj, 100, 100); }
imageObj.src = 'http://vignette1.wikia.nocookie.net/doratheexplorer/images/8/88/Dora_Exploradora_(11).png/revision/latest?cb=20130928190347';
}
if (document.getElementById('fig2').checked)
{ var context = document.getElementById('display').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ context.drawImage(imageObj, 100, 100); }
imageObj.src = 'http://vignette1.wikia.nocookie.net/angrybirds/images/f/f7/Red_shoked_3.png/revision/latest?cb=20130505082125';
}
if (document.getElementById('fig3').checked)
{ var context = document.getElementById('display').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ context.drawImage(imageObj, 100, 100); }
imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';
}
// FUNCTION FOR DISPLAYING AND DRAGGING THE TEXT!
if (document.getElementById('design3').checked) {
var canvas2 = document.getElementById("display");
context = canvas2.getContext("2d");
var $canvas2 = $("#display");
var canvasOffset = $canvas2.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas2.scrollLeft();
var scrollY = $canvas2.scrollTop();
var startX;
var startY;
var texts = []; // an array to hold text objects
var selectedText = -1;// this var will hold the index of the hit-selected text
function draw() { // clear the canvas & redraw all texts
context.clearRect(0, 0, canvas2.width, canvas2.height);
for (var i = 0; i < texts.length; i++) { var text = texts[i];
context.fillText(text.text, text.x, text.y); }
}
function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
function handleMouseDown(d) {
d.preventDefault();
startX = parseInt(d.clientX - offsetX);
startY = parseInt(d.clientY - offsetY);
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i; } }
}
function handleMouseUp(d) { // done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseOut(d) { // also done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseMove(d) {
if (selectedText < 0) { return; }
d.preventDefault();
mouseX = parseInt(d.clientX - offsetX);
mouseY = parseInt(d.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
draw(); }
$("#display").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events
$("#display").mousemove(function (d) { handleMouseMove(d); });
$("#display").mouseup(function (d) { handleMouseUp(d); });
$("#display").mouseout(function (d) { handleMouseOut(d); });
$("#text_dedi").click(function () {
var y = texts.length * 20 + 20;
var text = { text: $("#dedi_text").val(),
x: 20,
y: y
};
context.font = "30px Roboto";
text.width = context.measureText(text.text).width;
text.height = 16;
text.color = "#ffffff";
texts.push(text); // put this new text in the texts array
draw(); // redraw everything
});
//this is the code for CLEAR BUTTON
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas2.width, canvas2.height);
texts = []; },
false);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="design3" name="design_3" onchange="updateTotal()" />Dedication (click me first)
<div class="disp_dedi"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication">
<button id="text_dedi"> Post </button> <input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()"> </div>
<br> <input type="radio" id="fig1" name="figurine_select" value="dora" onchange="updateTotal()" /> Dora
<input type="radio" id="fig2" name="figurine_select" value="Angry Bird" onchange="updateTotal()" /> Angry Bird
<br> <input type="radio" id="fig3" name="figurine_select" value="barbie" onchange="updateTotal()" /> Barbie
<canvas id="display" height="400px" width="600px" style="position:absolute;"> </canvas>一旦我选择其他图像，我也不想删除图像。 如您所见，每次拖动奉献时，图像都会消失。
我真的很困惑如何解决它...... 提前谢谢你！！！
【问题讨论】：
-
到目前为止你尝试过什么？可能需要考虑使用 jQuery UI 并使用 HTML 元素“构建”您的图像。然后，一旦一切就绪，您就可以使用 html2canvas 之类的东西来创建图像。
-
我将首先通过jshint.com 运行您的代码并清除语法错误。
-
@Twisty 你好，非常感谢。我也不能在这里运行html吗？ ..我有另一种方法，你能帮我处理多张图片吗？ stackoverflow.com/questions/42497330/…
-
不清楚您正在使用什么或您正在尝试做什么。我接受了一个建议：jsfiddle.net/Twisty/955j8so3/8
-
@Twisty 哇哇哇谢谢你！！！太神奇了..这可能在画布上吗？因为在自定义之后我需要捕获卡片并将图像保存到我的数据库中。
标签： javascript jquery html canvas