2012-11-24 3 views
4

SVG 파일을로드하려고하는데 KineticJS (KJS)를 사용하여 캔버스에 표시하려고하므로 임의의 모양과 경로가있는 SVG 파일을 캔버스에 표시 할 수 있는지 여부를 알고 싶습니다. KJS를 사용 하시겠습니까?SVG를 KineticJS에로드 중

다른 소프트웨어를 통해 내 보낸 SVG도 많이 다릅니다. 예를 들어 어도비 일러스트 레이터를 통해 내 보낸 SVG의 경우 채우기, 획, 획 폭 등이 있습니다. SVG가 Inkscape를 통해 내 보낸 동안 각 태그의 속성으로 이 모든 것 채우기, 획, 획 폭 등. 각각의 태그에 대한 "스타일"속성의 문자열 값으로 사용됩니다.

그래서 저는 AI에서 내 보낸 SVG의 형식에 맞는 SVG 파서를 작성한 다음 KJS를 통해 캔버스에 SVG를 다시 그리기 위해 사용합니다.

  1. 어떤 도구 밖에 사용할 수 있는가, 경로 태그로 태그를 모든 원시 (등 라인, RECT, 원) 변환 할 수있는 :하지만 그 일을하기 전에, 난 그냥 확인하고 싶어서? 나는. rect & 타원 태그 대신 해당 태그가 해당 경로 태그로 변환됩니다.
  2. KJS 이외의 캔버스에 SVG를로드 할 수있는 다른 방법이 있습니까?
+0

나는 fabric.js가 프로젝트 http://fabricjs.com/에 더 적합하다고 생각한다. SVG와 캔버스 파서가 포함되어있다. – Duopixel

답변

5

불행하게도 당신이 할 수없는 drawImage SVG 캔버스 (test)로.

그러나 사용자 정의 KineticJS 모양의 SVG를 그리는 canvg을 사용할 수 있습니다 (test) :

var drawSvg = new Kinetic.Shape ({ 
    x: 10, y: 10, 
    drawFunc: function (canvas) { 
    canvas.getContext().drawSvg (svgSource, 0, 0, 25, 25) 
    } 
}); layer.add (drawSvg) 
+2

'drawFunc는 : 기능 (컨텍스트) {. 는 context.canvas._canvas.getContext ('2D') drawSvg는 (svgSource) context.fillStrokeShape가 (이)}'내가 API가 변경되었습니다 생각 는 두 번째 줄은 상호 작용한다 클릭과 같은 이벤트의 경우 – antpaw

3

사실이의 drawImage() 캔버스로 SVG 가능하다 (ArtemGr의 코드는 FF에서 일하고 및 크롬 나를 위해).

하지만 크롬에서는 원본 정책 오류 (https://bugs.webkit.org/show_bug.cgi?id=17352에보고 된 버그가 있음)가 발생합니다.

내가 운동으로 canvg을 사용하려했지만, 나는이 문제를 발견

  1. 그것은 입니다 매우 느린 운동의 청취을 사용하는 경우;
  2. 이미지 크기를 조절해야하는 경우 렌더링 품질이 매우 낮습니다.

내가 찾은 해결책은 fabricjs의 SVG 렌더링을 사용하는 것이고, 이는 매우 우수한 것으로 입증되었습니다. 코드는 다음과 같습니다

var fabricSvg; 
// uses the fabric SVG engine 
fabric.loadSVGFromUrl(svgSource, function(objects, opts) { 
    if (objects.length > 1) 
    fabricSvg = new fabric.PathGroup(objects, opts); 
    else 
    fabricSvg = objects; 

    fabricSvg.originX = 'left'; 
    fabricSvg.originY = 'top'; 

    var drawSvg = new Kinetic.Shape({ 
    x: 10, y: 10, 
    drawFunc: function(canvas) { 
     // use fabric SVG engine with Kinetic canvas context 
     fabricSvg.render(canvas.getContext()); 
    } 
    }); 
    layer.add(drawSvg); 
}); 

그런 식으로 우리는 직물의보다 더 나은 성능을 가지고 운동 애니메이션 엔진을 사용할 수 있으며, 원단의 SVG 모듈을 렌더링합니다.

+0

귀하의 솔루션이 정말 좋은 것처럼 보입니다. 'drawHitFunc' 작업을 어떻게 드래그 앤 선택할 수있게 할 수 있습니까? – zipp

+0

Canvg는 느리지 만 캐싱에는 문제가 없습니다. fabricjs을 언급 주셔서 감사합니다. – ArtemGr

관련 문제