Poilu raphael 부울 연산 (SVG 편집과 통합, 빼기)을 통합

Question

svg-edit, 특히 Mark McKays Method draw : https://github.com/duopixel/Method-Draw의 수정을하고 있습니다.

내가 찾은 Raphael 라이브러리를 사용하고 싶습니다 : https://github.com/poilu/raphael-boolean 내 캔버스 내에서 경로에 부울 (설정) 연산을 수행 할 수 있습니다. 타원과 함께 UNION을 (용접) 경로를 반환하기로 편집기 밤은 버튼을 클릭시

var paper = Raphael("canvas", 250, 250); 

var path = paper.path("M 43,53 183,85 C 194,113 179,136 167,161 122,159 98,195 70,188  z"); 
path.attr({fill: "#a00", stroke: "none"}); 

var ellipse = paper.ellipse(170, 160, 40, 35); 
ellipse.attr({fill: "#0a0", stroke: "none"}); 


var newPathStr = paper.union(path, ellipse); 

//draw a new path element using that string 
var newPath = paper.path(newPathStr); 
newPath.attr({fill: "#666"}); 

// as they aren't needed anymore remove the other elements 
path.remove(); 
ellipse.remove(); 

좋아요 :

지금 내가하는 기능을 발사 편집기 내에서 버튼을 구현?

내가 잘못 먹었습니까?

나는 var paper = Raphael ("canvas", 250, 250)으로 뭔가를 변경해야한다고 생각하고 있습니다. 선은 svg-edit가 캔버스에 다른 이름을 사용하고 있기 때문에 줄을 잇지 만 나는 그것에 대해 어떻게 생각하는지 모른다.

나는 언젠가 이것으로 언젠가는 어려움을 겪어 왔기 때문에 어떤 도움을 주셔서 감사하겠습니다.

업데이트 :이 라이브러리는 다중 객체 용접, 자체 교차 및 기타 많은 경우를 처리 할 수 ​​없습니다. 2 개의 간단한 객체에 대한 연산을 수행하고자 할 때만 작동합니다. 이것은 당면한 질문과 즉시 관련이 없을 수도 있지만 어쨌든 언급하는 것이 현명하다고 생각했습니다. 당신은 부울 연산을 찾고 있다면

SVG 요소에이 질문을 참조하십시오 : 다음과 같이 Boolean Operations on SVG paths

Answer 1

코드를 당신이 고립에서 작품을 게시 : http://jsfiddle.net/5SaR3/

당신은 라파엘 생성자를 변경 할 수 있어야한다 행은 다음과 같습니다.

var paper = Raphael(canvas); 

여기서 canvas는 svg-edit에서 사용하는 SVG 요소에 대한 객체 참조입니다.