Fabricjs : 이미지 패턴으로 svg 채우기

내 SVG 파일을로드하고 이미지 파일에서 생성 한 패턴으로 채우고 싶습니다. 내가 fabric.Image 인스턴스를 사용하려고 원래Fabricjs : 이미지 패턴으로 svg 채우기

canvas = new fabric.Canvas('mainCanvas') 
# image = new fabric.Image(img[0]) 
# console.log image 
fabric.loadSVGFromURL '/assets/my.svg', 
    (objects) -> 
    fabric.util.loadImage "url/to/my/image", (image) -> 
     console.log image 
     svg = fabric.util.groupSVGElements(objects) 
     svg = svg.scale(0.04).set(fill: "black", opacity: 0.5) 
     svg.fill = new fabric.Pattern 
     source: image 
     repeat: "no-repeat" 
     canvas.add(svg) 
     canvas.renderAll()

(IMG는 jQuery를 이미지 요소, 그래서 생성자에 원시는 HTMLElement를 전달하고 있습니다), 그러나 다만 확실하게 : 여기

내 현재의 접근 방식 & pattern tutorial와 (과) 유사한 코드를 사용하십시오 loadImage 메서드를 사용하고 있습니다.

불행히도이 코드는 작동하지 않는 것 같습니다 (svg가로드되었지만 패턴이 없습니다). 패턴으로 svg를 채울 수 있습니까? 그렇다면 어떻게 할 수 있습니까?

출처

2013-09-03 user1105595

SVG 모양이 fabric.Path이 아닌 fabric.PathGroup으로 구문 분석되는 것이 문제 일 수 있습니다. fabric.PathGroup은 복수 fabric.Path 개체로 구성되므로 PathGroup 인스턴스 자체의 값을 채우지 않고 채우기 값을 설정해야합니다.

enter image description here

출처

2013-09-04 14:04:33 kangax

: 당신이 kitchensink로 가서 "Patternify"버튼을 사용하는 경우

if (obj instanceof fabric.PathGroup) { obj.getObjects().forEach(function(o) { o.fill = pattern; }); } else { obj.fill = pattern; }

, 당신은 (이 정확히 우리가 사용하고있는 코드) 더 복잡한 형태로 작동하는지 볼 수 있습니다 안녕하세요, 귀하의 의견을 보내 주셔서 감사합니다, 불행히도, 그건 사실이 아니에요. 현재 코드가 있습니다 : http://pastebin.com/raw.php?i=HUeBkq1t - 여전히 작동하지 않습니다. 어떤 아이디어가 잘못 될 수 있습니까? – user1105595

"fill"속성에 패턴이 아닌 이미지를 지정하는 것처럼 보입니다. – kangax

@ user1105595 도움이 되었습니까? – kangax

Fabricjs : 이미지 패턴으로 svg 채우기

답변

관련 문제