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ました。うまくいきませんでした。
  • HTML 生成中に divを取得しouterHTMLてプロパティを挿入することはできますが、非常に面倒です。
  • 一般的に使用される角度 (0、45、90、135、180 など) の CSS クラスを提供することで妥協できますが、ここですぐにあきらめたくありません。

だから、私は皆さんに尋ねています - この問題を解決するためのより良い方法はありますか?

前もって感謝します、
シェッシュ

4

2 に答える 2

1

「.style」でスタイルを設定しないでください。代わりに「setattribute」を使用してください。両方のブラウザに両方を追加する必要があります。また、これにより、1 つのコマンドでスタイルを適用できます。

 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 要素の現在のエンジェルを返すことができます。.getRotateAngle()

ドキュメント: http://code.google.com/p/jqueryrotate/wiki/Documentation

于 2012-06-21T06:40:31.777 に答える