1

背景资料

我正在开发一个可视表单设计器，没有编码经验的人可以在其中拖动表单域来创建表单并打印它们或保存为 HTML 文档。

我介绍了一种绘制直线的方法，该直线也可以以任何角度倾斜。我通过使用没有高度且仅使用底部边框的普通 div 来完成此操作。而当我应用CSS rotate transform到 div 时，它可以任意角度倾斜。

问题

在设计器中，当用户更改线条的角度（斜率）时，我通过 Javascript 应用样式。像这样的东西：

lineWrapper.style.webkitTransform = "rotate(" + angle + "deg)";
lineWrapper.style.MozTransform = "rotate(" + angle + "deg)";

当用户想要将表单保存为 HTML 时，我会获取 outerHTML 并将其返回给用户。在这里，如果我使用的是 Chrome，MozTransform则生成的 HTML 中不存在该属性，如果我使用的是 Firefox，webkitTransform则该属性不存在。

我尝试过的方法

我试图通过多种方式解决这个问题：

  • 我没有通过style属性设置它，而是尝试通过style.cssText属性设置它。它没有用。
  • 我可以outerHTML在 HTML 生成期间获取 div 并插入属性，但这是一件非常麻烦的事情。
  • 我可以通过为常用角度（0、45、90、135、180 等）提供 CSS 类来妥协，但我不想在这里太快放弃。

所以，我问你们 - 有没有更好的方法来解决这个问题？

在此先感谢，谢
什

4

2 回答 2

1

不要使用“.style”设置样式，而是使用“setattribute”。它应该在两个浏览器中都添加。这也将允许您使用一个命令应用样式。

 lineWrapper.setattribute("style", "-webkit-transform : rotate(" + angle + "deg); -moz-transform : rotate(" + angle + "deg)");
于 2012-06-21T06:46:13.867 回答
0

我使用一个轻量级的 jQuery 插件进行旋转：http ://code.google.com/p/jqueryrotate/。它真的很容易使用，你可以通过使用返回任何 html 元素的当前 angel：.getRotateAngle()

文档：http ://code.google.com/p/jqueryrotate/wiki/Documentation

于 2012-06-21T06:40:31.777 回答