끌어서 놓기, 이미지 크기 조정 및 캔버스 기능을 하나의 캔버스에

Question

사용자가 와서 공백 영역 (div 또는 canvas 등)이있는 응용 프로그램에서 작업 중이며 이후에는 mycanvas를 호출 할 수 있습니다. 이제 그는 외부 (div)에서 일부 이미지를 드래그하여 mycanvas에 놓습니다. 그는 또한 크기를 조정할 수 있습니다. 또한 지우개 기능이있는 연필과 색상으로 mycanvas에서 무언가를 그릴 수 있습니다. 자, 지금까지 내 연구에 따르면, 나는 드로잉 부분이 순수한 HTML 5 캔버스 소재라는 것을 알아 냈습니다. 그래서 문제 없습니다. 하지만 그가 외부 div/canvas에서 mycanvas로 이미지를 드롭 할 수 있는지 여부는 확실하지 않습니다. 단일 영역에서 세 가지 기능 (외부에서 끌어 놓기, 연필로 그리기, 이미지 크기 조정)을 모두 수행하는 방법을 알려주십시오.

Answer 1

당신은 운동 JS를 사용하여 필요한 모든 기능을 얻을 수 있습니다

docuemnt.addEventListener("mousedown", function(){ }); 
docuemnt.addEventListener("mouseup", function(){ }); 
docuemnt.addEventListener("mousemove", function(){ }); 
docuemnt.addEventListener("click", function(){ }); 

희망은 내가 당신을 도울 수 있습니다.

드래그, 드롭 및 크기를 조정하려면

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

말을, 다른 모양을 사용하여 라인 페인트 :

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-line-tutorial/

외부 캔버스에서 떨어지고는, 아마 가장 간단한 것입니다 :

http://www.w3schools.com/html/html5_draganddrop.asp

통합에 문제가 있는지 확인하고 알려주십시오.

Answer 2

나는 Html5Canvas에 의해 온라인 dnd 편집기를 만들었습니다.

내가 예를 들어, 이미지

var DndImage = function(x, y, width, height, image){ 
    this.type = "image"; 
    this.image = image; 
    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
} 

을

var loop = function(){ 
    // Operation Here 
} 

self.setInterval(loop, 1000/60); 

데이터 모델을 작성 먼저 루프를 생성합니다

그런 다음 우리의 루핑

var ObjectArray = new Array(); 
var WIDTH = 800; 
var HEIGHT = 600; 
var loop = function(){ 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    context.clearRect(0, 0, WIDTH, HEIGHT); 
    for(var x = 0; x < ObjectArray.length; x++){ 
    if(ObjectArray[x].type == "image") 
     context.drawImage(ObjectArray[x].image,ObjectArray[x].x,ObjectArray[x].y, ObjectArray[x].width, ObjectArray[x].height); 
    } 
} 

기능에 이미지를 그릴 새 이미지 객체 추가

function addImage(src, x, y, width, height){ 
    var img = new Image(); 
    img.src = src; 
    img.onload = function(){ 
    ObjectArray.push(new DndImage(x, y, width, height, img)); 
    } 
} 

이제 dnd를 원할 경우 Listener를 설정하여 마우스 이동 이벤트를 수신해야합니다. DndImage 객체 x와 y를 이미지 canav에서 마우스 위치를 따르도록 설정하십시오. 이미지의 크기를 조절하거나 크기를 변경할 수도 있습니다. D