5

マウスの動きに基づいて長方形を動かしたい。以下のリンクを参照してください。

http://atomicrobotdesign.com/blog_media/draw/draw1.html

mousedownイベントで長方形の開始位置を取得し、ドラッグを開始すると、マウス移動イベントで長方形が作成されます。しかし、前の値に移動すると（つまり、マウスの下の値よりも小さい値に移動すると、負の値が返されるため）、幅は負になります。

上記のリンクはキャンバスの長方形です。しかし、私は同じロジックでsvg長方形を作成しました。

長方形の負の幅はサポートされていませんか？または、マウスの移動に基づいて長方形を移動するにはどうすればよいですか？

何が悪いの？

私のコードスニペット。

ChartMouseDown:function(e){

//       e = this.normalizeMouseEvent(e);


      var mousedownCords=this.calMousePosition(e);
      this.mouseDownX=mousedownCords.X;
      this.mouseDownY=mousedownCords.Y;

      this.chartMouseDownPoint= this.GetValuebyPoint(Math.abs(this.mouseDownX-this.model.m_AreaBounds.X),Math.abs(this.mouseDownY-(this.model.m_AreaBounds.Y + this.model.m_AreaBounds.Height)));
      this.zoomingX=true;

    },



ChartMouseMove: function (evt) {

    if( this.zoomingX)
    {

    var mouseMoveX,mouseMoveY;

     var mouseMoveCords=this.calMousePosition(evt);
      mouseMoveX=mouseMoveCords.X;
      mouseMoveY=mouseMoveCords.Y;
      $(this.ZoomAreaRect).remove();
      var width =  Math.abs(mouseMoveX - this.mouseDownX);
      var height = mouseMoveY - this.mouseDownY;
      var x;
      if(mouseMoveX > this.mouseDownX)
      x= this.mouseDownX;
      else
      x= mouseMoveX;

       this.ZoomAreaRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

        $(this.ZoomAreaRect).attr({
            'id': 'ZoomArea', 'x': x, 'y': this.model.m_AreaBounds.Y, 'width': width, 'height': this.model.m_AreaBounds.Height,
            'fill': 'gray', 'stroke-width': 1, 'stroke':'gray'
        });

       $(this.ZoomAreaRect).appendTo(this.SvgObject);

    }


 calMousePosition:function(e)
    {
     var matched = jQuery.uaMatch( navigator.userAgent );
     var browser = {};
     var mouseX,mouseY;
     if(matched.browser.toLowerCase()=="mozilla")
        {
        mouseX = (e.pageX)-  $(this.SvgObject).parent().offset().left;
        mouseY=  (e.pageY) - $(this.SvgObject).parent().offset().top;
        }
        else
        {
        mouseX =  (e.pageX +document.documentElement.scrollLeft)-$(this.SvgObject).offset().left;
        mouseY =  (e.pageY + document.documentElement.scrollTop) - $(this.SvgObject).offset().top;
        }

        return { X: mouseX, Y:mouseY};

    },

ありがとう、

シヴァ

4

3 に答える 3

11

これをSVGに実装する場合は、長方形の幅/高さが常に正であることを確認し、それに応じてx/yを計算する必要があります。

于 2013-03-24T13:00:20.250 に答える
1

開始と終了の2つの座標配列があり、(start[0],start[1])が左上（または右下）で、(end[0],end[1])が左上（または右下）の場合、これはその長方形を描画するためのアルゴリズムであり、これらの座標が切り替わるかどうかは関係ありません。

              <rect
                fill="rgba(255,0,0,0.3)"
                x={Math.min(start[0], end[0])}
                y={Math.min(start[1], end[1])}
                width={Math.abs(start[0] - end[0])}
                height={Math.abs(start[1] - end[1])}
              />
于 2020-04-15T04:59:11.067 に答える
0

長方形の代わりにポリゴンを使用できます。ポイントは次のようになります。

points={`${x},${y} ${x + width},${y} ${x + width},${y + height} ${x},${y + height}`}
于 2022-01-15T12:06:33.400 に答える