8

ユーザーが（画像上に）線を引けるようにするためのJavascriptコードを探しています。

Photoshop の線ツールと同じように (たとえば):

ユーザーが画像をクリックし、マウスをドラッグします (開始点とマウス ポイントの間の線はマウス ドラッグで動的に描画されます)。

ページに開始座標と終了座標を送信するための呼び出し可能な関数も必要です。

領域選択用のこの非常に優れたスクリプトを見つけました: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

線（およびJSの他の形状）を描画するための多くのスクリプトを見つけましたが、探しているものが見つかりませんでした。

ありがとう

4

7 に答える 7

17

標準的な描画方法がないため、古いブラウザや IE に対応したい場合は、ライブラリを使用する必要があります。SVGライブラリは、または Microsoft の描画のクロス プラットフォームの問題を処理します。VML

Raphael JSをお勧めします

于 2010-03-24T17:00:48.507 に答える
3

raphael.jsは、FF、Safari、Chrome、IE6 +で動作するjavascript（MITライセンス）用の軽量レンダリングツールです。

最初の3つにはSVGを使用し、IEにはVMLを使用しますが、APIはブラウザー間で同一であり、非常に優れています。

http://raphaeljs.com/

例えば 

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

ドラッグしながら線を引くために使用しましたが、使いやすさを保証できます

于 2010-03-25T01:42:25.893 に答える
2

外部ライブラリを必要とせずに JavaScript で線を描画するためのクロスブラウザ ソリューションは、次の場所にあります: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

これは、IE を含むすべてのブラウザーで機能します。

于 2010-12-14T15:13:54.443 に答える
1

あなたの数学が十分に良ければ、（狂ってはいますが）最新のブラウザのほとんどでキャンバスタグなしで（必要に応じて）次のいずれかを使用してそれを行うことができます。

例えば作成することによって。たとえば、1pxの高div。「線」のボーダートップ、およびマウスドラッグイベントを使用して配置および回転します。

狂気はこのように横たわっていますが、それは非常に楽しい練習になるでしょう. (クロスブラウザで健全なRaphael JSのようなものを使用する必要があります-上記を参照)

于 2010-03-24T19:27:35.523 に答える
1

canvas要素を使用して画像を表示することを検討してください。次に、その上に線 (またはその他のもの) を描くのは簡単です。

于 2010-03-24T17:00:21.370 に答える
1

私は似たようなことに取り組んでいます。キャンバスに線を引くのはとても簡単です。ここで私のコードから取得できます。

http://p-func.com/html5_test/test2.html

mousedown リスナーに従ってください。

画像をロードしたいときは、raphael ライブラリを使用する方が良いかもしれません。Canvas はフラットなイメージのように見えるので、これを見ました。したがって、それにエイムジを追加したい場合、ユーザーがその画像を操作できるようにすると、それは許可されません (私が見逃しているものがない限り)。

Raphael を使用すると、描画したり、それらの描画や画像をオブジェクトとして使用したりできます。

于 2010-04-19T23:07:59.117 に答える
0

サポートされている場合は、キャンバスを使用できます。IE では、フィルターの回転機能を使用します。ここでは両方で動作します：

http://www.gatekeeperel.co.uk/interactives/web.html

于 2012-02-15T17:53:03.953 に答える