Framer JS에서 '캔버스'그리기 기능을 사용할 수 있습니까?

Question

은 내가 만들고 FramerJS 프로토 타입에 캔버스 요소를 추가하는 데 성공했다 :

는

myCanvas = document.createElement "canvas" 
myCanvas.setAttribute("width","750px") 
myCanvas.setAttribute("height","500px") 
myCanvas.setAttribute("style","border: 2px solid black; background: #CCC") 

container = new Layer 
    height: 1334 
    width: 750 
    backgroundColor: "white" 
    html: myCanvas.outerHTML 
ctx = myCanvas.getContext "2d" 

ctx.fillStyle = "blue" 
ctx.fillRect(0, 0, 50, 50) 

당신 print(ctx) 경우는 출력으로 유효한 CanvasRenderingContext2D을 보여줍니다. 문제는 프로토 타입에 아무런 변화가 없다는 것입니다. 그것은 공백으로 남아 있습니다 - 마치 fillRect 함수가 호출되지 않았습니다.

이것이 지원 부족인지 아니면 내가 잘못한 것인지 확인해야합니다.

Answer 1

레이어의 html을 캔버스 html로 설정하면 작성한 캔버스에 대한 참조가 손실됩니다. 그래서 fillRect 할 호출되어 있지만 캔버스에 실제로 :

는 당신이 대신 html 속성을 제거하고 경우 참조 :

container._element.appendChild(myCanvas) 

캔버스에 대한 참조가 남아 있고 실제로에 그리기있어 표시되는 캔바스.

전체 예 :

myCanvas = document.createElement "canvas" 
myCanvas.setAttribute("width","750px") 
myCanvas.setAttribute("height","500px") 
myCanvas.setAttribute("style","border: 2px solid black; background: #CCC") 

container = new Layer 
    height: 1334 
    width: 750 
    backgroundColor: "white" 

container._element.appendChild(myCanvas) 
ctx = myCanvas.getContext "2d" 

ctx.fillStyle = "blue" 
ctx.fillRect(0, 0, 50, 50) 

프레이머 프로젝트 : http://share.framerjs.com/v4a1eyjv806s/