fabricjs - fabric.js 更新以旋转 div 而不是画布

Question

如何使用fabric.js使div可旋转而不是画布？需要在 fabric.js 中更新什么来完成这个要求？如果将画布放置在 div 内来渲染图像，但需要旋转整个 div 而不是画布，那会很好。

Answer 1

旋转（或真正以任何方式操纵）常规 HTML 元素不是 Fabric.js 的工作。

您可以使用 CSS3 样式来旋转包含画布的 div：

#myCanvasWrapperDiv
 {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
    -o-transform: rotate(30deg); /* Opera */
    -moz-transform: rotate(30deg); /* Firefox */
 }

如果您希望用户能够旋转此 div，则必须为他们提供一种方法来做到这一点。这可以像带有按钮或 onchange 事件处理程序的文本输入一样简单，也可以像旋转手柄那样复杂。可能有一个 jQuery 插件可以使元素“可旋转”，类似于拖放插件。