HTML5 캔버스 페인팅 응용 프로그램에서 끌어서 놓기를 구현하는 방법은 무엇입니까?

Creating an HTML 5 canvas painting application을 기반으로 HTML5 캔버스 페인팅 응용 프로그램을 만들었습니다. 그것은 잘 작동하지만 각 객체를 만든 후에는 객체를 드래그해야합니다. Working demo HTML5 캔버스 페인팅 응용 프로그램에서 끌어서 놓기를 구현하는 방법은 무엇입니까?

그림의 드래그 앤 드롭을 구현하는 방법은 무엇입니까?

출처

2011-12-06 ramesh

에서 소스 코드를

체크 아웃은 데모 당신은 당신이 스스로 실행 취소/재실행을 처리해야 lib에는 "원시"로 라파엘를 사용하는 경우. graphiti lib 안에는 실행 취소/다시 실행 스택이 있었으며 SVG, PNG, JSON 등의 내보내기를 지원합니다 ...

추가 Viso와 같은 종류의 커넥터 및 포트가 있습니다.

http://www.draw2d.org/graphiti/jsdoc/#!/example

인사말

출처

2012-05-16 07:07:03

사용자가 캔버스를 클릭하면 좌표를 확인하고 (개체의 좌표와 비교) 개체에 있는지 확인해야합니다. 예 : mousedown 객체에있는 경우, 당신은 개체를 변경해야

이

function (pt) { 
    return Math.pow(pt.x - point.x,2) + Math.pow(pt.y - point.y,2) < 
                  Math.pow(radius,2); 
};

좌표 방법 마우스에 따라 : 점 (심지어 mousedown 예 : 좌표)이 방법 원 내에있는 경우 테스트 할 수 있습니다 움직입니다.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
window.onload = function() { 
    drawCircle(circle); 
    element = document.getElementById('canvas'); 
    element.addEventListener('mousedown', startDragging, false); 
    element.addEventListener('mousemove', drag, false); 
    element.addEventListener('mouseup', stopDragging, false); 
    element.addEventListener('mouseout', stopDragging, false); 
} 

function mouseX(e) { 
return e.clientX - element.offsetLeft; 
} 

function mouseY(e) { 
return e.clientY - element.offsetTop; 
} 

var Point = function (x, y) { 
    this.x = x; 
    this.y = y; 
    return this; 
} 

var Circle = function (point, radius) { 
    this.point = point; 
    this.radius = radius; 
    this.isInside = function (pt) { 
     return Math.pow(pt.x - point.x, 2) + Math.pow(pt.y - point.y, 2) < 
                  Math.pow(radius, 2); 
    }; 
    return this; 
} 

function startDragging(e) { 
    var p = new Point(e.offsetX, e.offsetY); 
    if(circle.isInside(p)) { 
     deltaCenter = new Point(p.x - circle.point.x, p.y - circle.point.y); 
    } 
} 

function drag(e) { 
    if(deltaCenter != null) { 
     circle.point.x = (mouseX(e) - deltaCenter.x); 
     circle.point.y = (mouseY(e) - deltaCenter.y); 
     drawCircle(circle); 
    } 
} 

function stopDragging(e) { 
    deltaCenter = null; 
} 

function drawCircle(circle) { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.beginPath(); 
    ctx.arc(circle.point.x, circle.point.y, circle.radius, 0, Math.PI*2, true); 
    ctx.fill(); 
} 

var circle = new Circle(new Point(30, 40), 25); 
var deltaCenter = null; 
var element; 

</script> 
</head> 
<body> 
<canvas id="canvas" width="400" height="300"></canvas> 
</body> 
</html>

내가 이렇게 쉬운 방법이 있다고 생각하지 않습니다 jsFiddle

출처

2011-12-06 17:04:09 Jonas

안녕 조나스 .. 응답하는 방법과 모양의 좌표를 얻는 주셔서 감사합니다? – ramesh

@rajeeesh : 직접 저장해야합니다. – Jonas

안녕하세요 이것은 이미지를 추가 할 때 사용하는 함수입니다 ... 어떻게 코돈을 저장합니까? this.mouseup = 함수 (EV) {(tool.started) 경우 { tool.mousemove (EV); var x = ev._x-28; var y = ev._y-28; var imageObj = new Image(); imageObj.onload = function() { varp = context.drawImage (imageObj, x, y); }; imageObj.src = "test.png"; tool.started = false; img_update(); } }; – ramesh

에 그것을 시도 : 여기

는 원을 드래그 할 수있는 예이다.

라인을 다루는 경우, 작성한 모든 라인을 추적하고, 좌표를 시작하고, 좌표를 끝내고, 일종의 Z- 색인을 유지하는 것이 좋습니다. 사용자가 드래그 동작 (onmousedown)을 시작하면 해당 점이 라인 근처에 있는지 확인한 다음 마우스를 움직일 때 객체를 업데이트하고 캔바스를 다시 그려야합니다. 당신이 비록 복잡한 객체를 처리하는 경우

How can I tell if a point belongs to a certain line?

이 훨씬 더 복잡해진다. 포인트가 경로 안에 있는지 확인하는 솔루션을 찾아야 할 것입니다.

출처

2011-12-06 17:08:22 amiuhle

HTML5 캔버스에 그려진 개체는 픽셀로 변한 다음 잊어 버립니다. 속성을 조정하고 캔버스를 업데이트하여 효과를 볼 수는 없습니다. 직접 기억할 수도 있지만 캔버스에는 여전히 픽셀이 설정되어 있으므로 기본적으로 속성을 조정할 때 전체 캔버스 (또는 적어도 일부)를 다시 그려야합니다.

이 응용 프로그램 대신 SVG를 고려하고 SVG 요소가 DOM에 저장되며 속성이 업데이트되면 브라우저가 변경 사항을 반영하도록 그래픽을 업데이트합니다.

캔버스를 사용해야하는 경우 마우스 - 히트, 개체 속성 및 다시 칠하기를 처리하기 위해 꽤 많은 코드를 작성해야합니다.

출처

2011-12-06 17:18:27

안녕하세요 james 답장을 보내 주셔서 감사합니다. 애플리케이션을 다시 코딩해야합니까, 아니면 요구 사항에 맞게 업그레이드 할 수 있습니까? 감사합니다. – ramesh

내 머리 꼭대기에서 나는 그런 종류의 물건에 대한 예제 또는 튜토리얼과 어떤 링크도 모릅니다. Paper.js 나 KineticJS와 같은 라이브러리가 있습니다. 캔버스 주위에 벡터 그래픽 래퍼가있어서 읽을 수있는 좋은 장소입니다. _some_ recoding을 어느 쪽이든해야만한다고 생각합니다.하지만 라이브러리를 사용한다면 어떨까요? SVG는 큰 변화가 될 것이며, 자신 만의 벡터 그래픽 코드를 작성하는 것도 큰 변화가 될 것입니다. –

Srikanth가 지적했듯이, Raphael.js는 SVG를 사용하지만 백엔드로 캔버스를 사용하지 않지만 벡터 그래픽 라이브러리입니다. –

동일한 효과 Joint.jS (http://www.jointjs.com/)와 Raphael.js (http://raphaeljs.com/)을 사용하여 달성 될 수있다.

Raphael으로 만든 도형은 DOM 요소와 마찬가지로 액세스 할 수 있으며 속성을 통해 조작 할 수 있습니다. 그것은 멋진 프레임 워크입니다.

Joint.js가 도형을 연결하는 데 도움이됩니다. 그들은 또한 다이어그램 라이브러리를 가지고 있으며 ERD, Statemachine 및 몇 가지 공통 다이어그램을 만드는 데 도움을 줄 수 있습니다. 가장 중요한 부분은 다이어그램 요소를 확장하고 사용자 정의 요소를 만들 수 있다는 것입니다. 그 턱 - droppingingly 차가운.http://www.jointjs.com/demos

출처

2011-12-06 22:42:29 Srikanth

HTML5 캔버스 페인팅 응용 프로그램에서 끌어서 놓기를 구현하는 방법은 무엇입니까?

답변

관련 문제