9

ユーザーに次の方法で線を引いてもらいたいWebアプリがあります。ユーザーがPoint1をクリックしてマウスを動かしたときに、 Point1から現在のマウスの位置に線を引き、Point2をクリックしたときに最後の線を描きます。 Point1からPoint2への線。

jQueryおよび/またはそのプラグインの1つを使用してそれを行うにはどうすればよいですか？

4

5 に答える 5

6

勝負を受けて立つ。

私はCSS変換とJavascriptの数学の束でそれをやろうとしました - 30分後に私はこれを持っています:

http://jsfiddle.net/VnDrb/2/

灰色の四角を 2 回クリックすると、線が描画されます。角度が 45 度を超えると線が正しく描画されない小さなバグがまだあります。他の誰かがそれを修正する方法を知っているかもしれません。Math.asin (arcsinus) を使用する代わりに、他の三角関数を使用するかもしれませんが、私はそれが本当に苦手です。小さなバグがあっても投稿しようと思っていましたが、それはあなたにとって良いスタートだと思います.

于 2012-07-31T16:14:29.787 に答える
4

私は今週末、さまざまなアプローチを試しましたが、私にとって最も効果的な解決策は、Adam Sanderson によるものです: http://monkeyandcrow.com/blog/drawing_lines_with_css3/

彼のデモはこちら: http://monkeyandcrow.com/samples/css_lines/

その核心は非常にシンプルで、常に優れています。

div.line{
  transform-origin: 0 100%;
  height: 3px; /* Line width of 3 */
  background: #000; /* Black fill */
}


function createLine(x1,y1, x2,y2){
  var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
  var angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
  var transform = 'rotate('+angle+'deg)';

    var line = $('<div>')
      .appendTo('#page')
      .addClass('line')
      .css({
        'position': 'absolute',
        'transform': transform
      })
      .width(length)
      .offset({left: x1, top: y1});

  return line;
}
于 2014-06-15T00:04:19.830 に答える
2

jQuery や従来の HTML ではできません。

  1. SVG (+svgweb for IE8- http://code.google.com/p/svgweb/ ) を使用して実行できます。SVG は動的に作成できます。jQuery + svgweb は完全に機能しています。SVG ノードの作成方法を知っていれば、このノードを jquerify するだけで済みます。ほとんどの場合、jquerifiing の後、1 つのメソッドのみを使用しましたattr()

  2. Raphael http://raphaeljs.com/ (SVG および VML に基づく) を使用して実行できます。

  3. Canvas ( http://flashcanvas.net/ for IE8- )を使用して実行できます。

SVG プログラミングの場合、次のようになります。

  1. 最初の点を作成する瞬間: 空行を作成しますvar Line(この点の座標も と になりx1ますy1)

  2. 次に、 Line のプロパティの再mousemove描画時にバインドしますx2y2

  3. 最後の行の位置を固定したmousedown後にオン。mousemove

アップデート

CSS/JS でそれを行うことができますが、主な問題は、変換用のマトリックス フィルターのみを持つ IE8 の計算にあります。

于 2012-07-31T15:20:25.873 に答える
0

しばらくの間、これの修正版を使用しています。うまくいきます。

http://www.ofdream.com/code/css/xline2.php

したがって、最初のクリックでドロップし、そこにプレースホルダー div (おそらく小さな円) としてオブジェクトを配置し、マウスを動かしながら線を描き続けるか、元のプレースホルダーをガイドとして使用して 2 回目にクリックしたときに線を描きます。

私のツールには行の移動が含まれているため、最近、このための別のヘルパー関数を作成しました。

function setLinePos(x1, y1, x2, y2, id) {
    if (x2 < x1) {
        var temp = x1;
        x1 = x2;
        x2 = temp;
        temp = y1;
        y1 = y2;
        y2 = temp;
    }
    var line = $('#line' + id);
    var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    line.css('width', length + "px");
    var angle = Math.atan((y2 - y1) / (x2 - x1));
    line.css('top', y1 + 0.5 * length * Math.sin(angle) + "px");
    line.css('left', x1 - 0.5 * length * (1 - Math.cos(angle)) + "px");
    line.css('-moz-transform', "rotate(" + angle + "rad)");
    line.css('-webkit-transform', "rotate(" + angle + "rad)");
    line.css('-o-transform', "rotate(" + angle + "rad)");

 }

それが jquery のバージョンで、このイテレーションでは IE の要件がないため無視します。元の関数からかなり簡単に適応させることができました。

于 2013-06-28T16:51:19.717 に答える