2
我很困扰如何将图像拖到我的画布上。 到目前为止，我是能够拖动文本以及周围... 但有些事情是做扳机删除我的形象，每次我发布一个新奉献..HTML5画布显示和拖动图像
我很为我刚得到它的代码混淆。
这里是我的代码：
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>，我也wan't删除图像一旦我选择其他图像。正如你所看到的，每次拖动奉献时图像都会消失。
我真的很困惑如何解决它... 谢谢你在高级！
你试过什么了？可能要考虑使用jQuery UI并用HTML元素“构建”图像。然后，一旦一切就绪，你可以像html2canvas一样来创建一个图像。 – Twisty
我会先通过http：// jshint运行你的代码。com /并清除语法错误。 – Twisty
@Twisty你好，非常感谢。我不能在这里运行HTML太对了？ ..嗯，我有另一种方法，你能帮我多个图像？ http://stackoverflow.com/questions/42497330/html5-multiple-images-drag-drop – Khyana