是否可以在 Framer JS 中使用 'canvas' 绘图功能？

Question

我已成功创建 canvas 元素并将其添加到 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 设置为 canvas html，您将失去对您创建的 canvas 的引用。所以 fillRect 被调用，但不是在 canvas 你实际看到的:)

如果您删除 html 属性而是执行：

container._element.appendChild(myCanvas)

对您的 canvas 的引用仍然存在，您实际上是在显示的 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"

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

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

Framer 项目：http://share.framerjs.com/v4a1eyjv806s/

是否可以在 Framer JS 中使用 'canvas' 绘图功能？

Is it possible to use 'canvas' drawing functions in Framer JS?

prototyping

framerjs