Framer JSで 'canvas'描画関数を使用できますか？

Question

は、私が作成し、FramerJSプロトタイプにcanvas要素を追加するために管理している：

は

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/