Làm thế nào để kéo một canvas với helper 'clone'?

Question

Tôi có một canvas HTML đơn giản

<div class='circle'> 
    <canvas id="myCanvas" width="100" height="100">Your browser does not support the HTML5 canvas tag.</canvas> 
</div> 

với phong cách

.circle { 
    height: auto; 
    width: auto; 
} 

và kịch bản

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(50, 50, 50, 0, 2 * Math.PI); 
ctx.fill(); 

$('.circle').draggable({ 
    helper: 'clone' // Remove this line to make it draggable 
}); 

Dường như tôi không thể sử dụng tùy chọn helper nơi mà tôi muốn giữ lại một bản sao của vòng tròn ở vị trí ban đầu khi tôi kéo nó vòng quanh. Kéo được sẽ chỉ hoạt động nếu tôi xóa tùy chọn trợ giúp. Điều này chỉ xảy ra với canvas, không phải nếu tôi vẽ vòng tròn bằng cách sử dụng css. Fiddle là here. Cảm ơn!

Answer 1

Thật không may khi bạn sao chép một yếu tố canvas, điều này không sao chép dữ liệu hình ảnh. Thay vào đó, bạn có thể muốn xuất dữ liệu canvas của mình dưới dạng url dữ liệu và sao chép hình ảnh.

Fiddle: http://jsfiddle.net/gwwar/Bdpq9/2/

<div class='circle'> 
</div> 

var c = document.createElement("canvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(50, 50, 50, 0, 2 * Math.PI); 
ctx.fill(); 
var url = c.toDataURL(); 
var img = document.createElement("img"); 
img.setAttribute("src",url); 
$(".circle").append(img); 

$('.circle').draggable({ 
    helper: 'clone' // Remove this line to make it draggable 
}); 

Answer 2

Đó là bởi vì nhân bản chỉ nhân bản vải yếu tố, không phải là nội dung của nó (canvas là một yếu tố đặc biệt trong lĩnh vực này). Bạn có thể xem bằng chứng về điều này bằng cách marking the canvas.

Bạn sẽ cần phải vẽ lại nội dung từ vải ban đầu vào các trường hợp nhân bản:

/// you need to get these objects in advance, then: 
clonedContext.drawImage(originalCanvas, 0, 0);