2011-09-04 30 views
5

私は訪問者がクリックアンドドラッグ使用して画像を拡大縮小させたい:クリックしてドラッグしてSVGの画像を拡大するには?

<html> 
    <body> 
     <svg> 
      <image> 

は私を助けるJavaScriptライブラリはありますか?

私はRaphael has click and drag方法に気づくが、私はまだにJSの多くを記述する必要があります。

  1. は画像
  2. のコーナーはコーナー付近を作る検索はのために
  3. ドローアイコンを選択可能コーナーが選択可能であることは明らかです
  4. クリックしてドラッグしてコーナーにドラッグします

私はすべてそれを行うことができましたが、時間がかかると思います。私が使用すべきオープンソースのスクリプトはありますか?その他の提案?

答えて

5

私はこのポストでこの解決策を見つけました: Draggables and Resizables in SVG

答えでは、jsfiddleリンク:http://jsfiddle.net/tmkfs/を見つけることができます。ボックスの隅をクリックしてドラッグすると、ボックスのサイズを変更できます。このコードがあなたに役立つことを願っています。

+0

このhttps://github.com/cjheath/Raphaelleも見つかりました。オブジェクトをクリックしてドラッグしてサイズを変更できるスクリプト。 – cabreracanal

1

これはわかりません。私は同じことをする必要があり、私はまだRahpeal.jsでこれを行う方法のプラグインや例を見つけていない驚いています。 SVGやRapheal.jsを使ってみたいと思っている人のように思えるので、私はそこに驚いています(私はscale + dragがこれをすると思っていましたが、そうではありませんでしたそれは思ったほど簡単です)。

私はこの機能を必要としているので、自分で構築しています。私はちょっとしたものに遭遇しました(ここに文書化されています:Raphael.js drag with scale causes weird jumping behavior)。私が終わったら、あなたが望むなら私が終わったときに私のソリューションをjsfiddleまたはgithubに投稿することができます。

+0

お役立ち情報はい、完了したら、ソリューションを共有してください。 – ram1

1

あなたは見てくださいSvgKitそれは、javascriptを使用してイベント処理を含むsvgを生成する素晴らしいライブラリを提供します。公式ドキュメントから

:イベント処理のためのSVGKitオブジェクトへ

追加。 SVGでは、マウス座標からローカル座標に移動するには、 が厄介です。 SVGEvent には、ドラッグ可能なアイテム、回転可能なアイテム、および アイテムを有効にするルーチンがあり、アイテムのパンとズームを防止します。

イベントデモis here

関連する問題