可拖动的对象和画布在循环中

Question

我有三个问题。第一个问题是最重要的，但我很欣赏为其他人解答。

---

第一个问题，看到这样的jsfiddle： https://jsfiddle.net/owLdgrdq/10

//copia nariz 
$(document).on('click', '#add-nariz', function(){ 
    var a = $('#add-nariz'); 
    var src = a.attr('src'); 
    var elem = $('<img class="objetos" src="' + src + '" width="30px" height="30px" style="positon: relative;" />'); 
    $('#fotoAlterada').append(elem); 
    elem.draggable(); 
}); 
//copia bolinha azul 
$(document).on('click', '#add-bb', function(){ 
    var a = $('#add-bb'); 
    var src = a.find('img:first').attr('src'); 
    var elem = $('<img class="objetos" src="' + src + '" width="30px" height="30px" style="positon: relative;" />'); 
    $('#fotoAlterada').append(elem); 
    elem.draggable(); 
}); 

$(document).on('click', '#salvaImagem', function(){ 

    var m = $('#foto'); 
    var totX = parseInt(m.css('width')); 
    var totY = parseInt(m.css('height')); 
    var c = document.getElementById('myCanvas'); 
    c.width = totX; 
    c.height = totY; 
    var ctx = c.getContext('2d'); 
    alert(totX + '\n' + totY); 

    var base = document.getElementById('foto'); 
    ctx.drawImage(base,0,0,totX,totY,0,0,totX,totY); 

    var posicoes = []; 
    $(".objetos").each(function(){ 
    var img = $(this); 
    x = parseInt(img.css("left"))+totX; 
    y = parseInt(img.css("top"))+totY; 
    altura = parseInt(img.css("width")); 
    largura = parseInt(img.css("height")); 
    posicoes.push([ 
    x, 
    y, 
    largura, 
    altura 
    ]); 
    }); 
    alert(JSON.stringify(posicoes)); 
    var j; 
    var numAderecos = posicoes.length; 
    for(j = 0; j < numAderecos; j++){ 
    ctx.drawImage(base,posicoes[j][0],posicoes[j][1],posicoes[j][2],posicoes[j][3]); 
    } 

}); 

我有一些图标（Adicionar这一领域的空白:)我想要在照片中添加（Editar这一领域的空白:)。当用户点击图标时，在照片旁边会进行复制。更多点击可制作更多副本。这些副本是可拖动的。用户选择对象的位置并单击按钮以保存（“SalvarMudanças”）。此按钮会将原始照片与其上的新对象（画布内）进行复制。

在JS代码的最后，我将小图片（与原图相同）作为小对象添加到画布中的照片中，但仅仅是因为我不知道如何复制添加的每个对象。我怎样才能做到这一点？

---

第二个问题，当点击按钮时，画布中的位置是不一样的，它们会拉下来一点（也是一样）。为什么会发生这种情况，如果我把填充和边距0px在CSS代码？

---

第三个问题，变“基地”我用$（“＃照片”）通过id来获取，但我不能在画布参数使用它。当我使用document.getElementById（'foto'）时，我可以。他们之间有什么不同？

---- ----编辑

我的这个目标是使移动应用，通过科尔多瓦/ PhoneGap的。用户必须能够从设备上获取图片或使用摄像头拍照（已经可以）。当照片/照片被获取时，窗户上会出现一些新的物体，如皇冠鼻子，彩色帽子和其他愚蠢的东西（没关系，只是改变style =“display：none;”来显示），当用户点击这些东西，他们在照片的底部复制，这些副本必须是可拖动的（这也很好）。然后，用jQuery-UI获取所有拖动对象到照片中的位置，用户点击一个按钮“SalvarMudanças”（“保存更改”），并且此操作将照片和对象复制到画布区域这是我制作应用程序的方式）。之后，用户点击另一个按钮，通过WhatsApp，Facebook，电子邮件和设备可以执行的任何其他方式共享修改后的图像（在画布中）。

Answer 1

这里只用帆布在一个顶部附加图标到图像

• 开拓出一个工具栏区的替换方式HTML5画布，并用你想要的图标填充它。
• 将目标图像放在工具栏下方。
• 收听鼠标事件。
• 允许用户将图标从工具栏拖到下面的图像上。
• 当用户通过释放鼠标“拖放”拖动图标时，在拖放的位置创建拖动图标的副本。

这里被注释的代码和一个演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
var isDown=false; 
 
var startX,startY; 
 

 
ctx.lineWidth=0.50; 
 
ctx.strokeStyle='lightgray'; 
 
ctx.fillStyle='white'; 
 

 
// vars for icons, etc 
 
var tbar={width:cw,height:35} 
 
var tw=30; 
 
var th=30; 
 
var dragging=null; 
 
var dropped=[]; 
 
var icons=[ 
 
    {name:'Flower',x:tw*0,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/flower.png'}, 
 
    {name:'Star',x:tw*1,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/star.png'}, 
 
    {name:'Plane',x:tw*2,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/plane2.png'}, 
 
    {name:'Mario',x:tw*3,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/marioStanding.png'}, 
 
]; 
 
    var thumbs=[]; 
 
var mainImg=new Image(); 
 
mainImg.crossOrigin='anonymous'; 
 
mainImg.onload=start; 
 
mainImg.src='https://dl.dropboxusercontent.com/u/139992952/multple/husky.jpg'; 
 
var imgCount=icons.length+1; 
 
for(var i=0;i<icons.length;i++){ 
 
    var icon=icons[i]; 
 
    icon.index=i; 
 
    icon.img=new Image(); 
 
    icon.img.crossOrigin='anonymous'; 
 
    icon.img.onload=start; 
 
    icon.img.src=icon.url; 
 
} 
 

 
// start is called when each image is fully loaded 
 
function start(){ 
 
    // wait for all images to load 
 
    if(--imgCount>0){return;} 
 
    // create 
 
    for(var i=0;i<icons.length;i++){ 
 
    var icon=icons[i]; 
 
    thumbs.push(thumb(icon.img,tw,th)); 
 
    } 
 
    // draw the toolbar & image 
 
    draw(); 
 
    // listen for mouse events 
 
    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
    $("#canvas").mouseup(function(e){handleMouseUpOut(e);}); 
 
    $("#canvas").mouseout(function(e){handleMouseUpOut(e);}); 
 
} 
 

 
// create thumbnails for each image (to be used as icons in the toolbar) 
 
function thumb(img,w,h){ 
 
    var iw=img.width; 
 
    var ih=img.height; 
 
    var s=Math.min((w/iw),(h/ih)) 
 
    var c=document.createElement('canvas'); 
 
    c.width=iw*s; 
 
    c.height=ih*s; 
 
    c.getContext('2d').drawImage(img,0,0,iw,ih,0,0,iw*s,ih*s); 
 
    return(c); 
 
} 
 

 
// draw the toolbar, image & any clone thumbnails added to the image 
 
function draw(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.fillRect(0,0,cw,tbar.height); 
 
    ctx.strokeRect(0,0,cw,tbar.height); 
 
    ctx.drawImage(mainImg,0,tbar.height); 
 
    for(var i=0;i<icons.length;i++){ 
 
    var icon=icons[i]; 
 
    ctx.drawImage(thumbs[icon.index],icon.x,icon.y); 
 
    } 
 
    for(var i=0;i<dropped.length;i++){ 
 
    var icon=dropped[i]; 
 
    ctx.drawImage(thumbs[icon.thumbIndex],icon.x,icon.y); 
 
    } 
 
    if(dragging){ 
 
    ctx.drawImage(thumbs[dragging.thumbIndex],dragging.x,dragging.y); 
 
    } 
 
} 
 

 
// 
 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get the mouse position 
 
    startX=parseInt(e.clientX-offsetX); 
 
    startY=parseInt(e.clientY-offsetY); 
 
    // hit test the toolbar icons and any dropped icons 
 
    var mx=startX; 
 
    var my=startY; 
 
    // hit test toolbar icons 
 
    if(mx>0 && mx<tw*icons.length && my>2 && my<2+tw){ 
 
    var icon=icons[parseInt(mx/tw)]; 
 
    dragging={thumbIndex:icon.index,x:icon.x,y:icon.y}; 
 
    dragging.source='icons'; 
 
    return; 
 
    } 
 
    // hit test dropped icons 
 
    for(var i=0;i<dropped.length;i++){ 
 
    var icon=dropped[i]; 
 
    if(mx>icon.x && mx<icon.x+tw && my>icon.y && my<icon.y+th){ 
 
     dragging=dropped[i]; 
 
     dragging.source='dropped'; 
 
     dragging.droppedIndex=i; 
 
     return; 
 
    } 
 
    } 
 
} 
 

 
// Add any 
 
function handleMouseUpOut(e){ 
 
    if(!dragging){return;} 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    // add the icon to its dropped position 
 
    if(dragging.source=='icons'){ 
 
    if(dragging.y>tbar.height){ 
 
     dropped.push(dragging); 
 
    } 
 
    // remove the dropped icon if it's back in the toolbar 
 
    }else if(dragging.y<tbar.height){ 
 
    dropped.splice(dragging.droppedIndex,1); 
 
    } 
 
    // clear dragging 
 
    dragging=null; 
 
    // redraw 
 
    draw(); 
 
} 
 

 
// move any icon that's being dragged 
 
function handleMouseMove(e){ 
 
    if(!dragging){return;} 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get mouse position 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    // move the dragged icon by the distance the mouse 
 
    // has moved since the last mousemove event 
 
    var dx=mouseX-startX; 
 
    var dy=mouseY-startY; 
 
    startX=mouseX; 
 
    startY=mouseY; 
 
    dragging.x+=dx; 
 
    dragging.y+=dy; 
 
    // redraw 
 
    draw(); 
 
} 
 

 
// save just the image with dropped icons 
 
$('#save').click(function(){ 
 
    var c=document.createElement('canvas'); 
 
    c.width=cw; 
 
    c.height=ch-tbar.height; 
 
    c.getContext('2d').drawImage(canvas,0,tbar.height,cw,ch-tbar.height,0,0,c.width,c.height); 
 
    var img=new Image(); 
 
    img.onload=function(){ 
 
    document.body.appendChild(img); 
 
    } 
 
    img.src=c.toDataURL(); 
 
});

body{ background-color: ivory; } 
 
#canvas{border:1px solid lightgray; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id='save'>Save</button> 
 
<h4>Drag from top toolbar & icon will be drop-copied<br>Drag dropped icons around image<br>Drag dropped icon back to toolbar to delete.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

这有点难以遵循，但我怀疑你是在将所有现有的DOM图像合成到单个画布上下文中。对于您可能会想看看globalCompositeOperation财产上2dcanvas：

globalCompositeOperation - 属性

Compositing Tutorial - 不同类型的工作方式

---

而且你的第三个问题基本轮廓：$('#foto')返回一个jquery对象，并且document.getElementById返回一个DOM对象。为了让你会做一些这样的实际DOM元素：var theEl = $('#foto')[0]