vue.js svgデータバインディング

Question

<template>
  <div id="lineSvgPractice" class="lineSvgPractice" @mousemove="resize" @mouseup="mouseup" >



    <div class="area">
        <svg class="svg" width="100" height="100" viewBox="0 0 100 100" >
            <circle :cx="point1XNow" :cy="point1YNow" r="1.4" fill="#ffffff" stroke="#000" @mousedown="point1Active"></circle>
                <line :x1="line1XNow" :y1="line1YNow" :x2="line2XNow" :y2="line2YNow" stroke="#000"></line>
            <circle :cx="point2XNow" :cy="point2YNow" r="1.4" fill="#ffffff" stroke="#000" @mousedown="point2Active"></circle>
        </svg>
    </div>
    


  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {
  }
})
export default class LineSvgPractice extends Vue {



/*--------------------------------------------------*/

    point1ActiveFlag = false
    point1XBefore = 29
    point1YBefore = 29
    point1XNow = 29
    point1YNow = 29

    line1XBefore = 30
    line1YBefore = 30
    line1XNow = 30
    line1YNow = 30

/*--------------------------------------------------*/

    point2ActiveFlag = false
    point2XBefore = 59
    point2YBefore = 59
    point2XNow = 59
    point2YNow = 59

    line2XBefore = 60
    line2YBefore = 60
    line2XNow = 60
    line2YNow = 60

/*--------------------------------------------------*/

    pointStartX = 0
    pointStartY = 0

    public point1Active(event){
        console.log(event)
        this.point1ActiveFlag = true
        this.pointStartX = event.clientX
        this.pointStartY = event.clientY
    }

    public point2Active(event){
        this.point2ActiveFlag = true
        this.pointStartX = event.clientX
        this.pointStartY = event.clientY
    }

    public mouseup(){
        this.point1ActiveFlag = false
        this.point2ActiveFlag = false
        this.point1XBefore = this.point1XNow
        this.point1YBefore = this.point1YNow
        this.line1XBefore = this.line1XNow
        this.line1YBefore = this.line1YNow
        this.point2XBefore = this.point2XNow
        this.point2YBefore = this.point2YNow
        this.line2XBefore = this.line2XNow
        this.line2YBefore = this.line2YNow
    }
    
    public resize(event){
        if(this.point1ActiveFlag){
            this.point1XNow = this.point1XBefore + (event.clientX - this.pointStartX)
            this.point1YNow = this.point1YBefore + (event.clientY - this.pointStartY)
            this.line1XNow = this.line1XBefore + (event.clientX - this.pointStartX)
            this.line1YNow = this.line1YBefore + (event.clientY - this.pointStartY)
        }

        if(this.point2ActiveFlag){
            this.point2XNow = this.point2XBefore + (event.clientX - this.pointStartX)
            this.point2YNow = this.point2YBefore + (event.clientY - this.pointStartY)
            this.line2XNow = this.line2XBefore + (event.clientX - this.pointStartX)
            this.line2YNow = this.line2YBefore + (event.clientY - this.pointStartY)
        }
    }

 
}
</script>

<style lang="scss">
.lineSvgPractice {
  
    .area{
        position: relative;
        width: 100vw;
        height: 80vh;
        .svg{
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            circle{
                cursor : pointer
            }
        }
    }

}
</style>

線の両端をドラッグして移動できる、コードを書いたのですが、マウスの移動距離とsvg要素の移動距離が合いません...
少しドラッグしただけで、すごい動いてしまいます...
解決策をお伺いしたいです...
そもそもこのやり方は正しいのでしょうか
なんか下手な気がして

開発環境は、vue-cli3.0です↓
https://alligator.io/vuejs/using-new-vue-cli-3/

---

yhg様、恐縮ですが回答依頼させていただきました...
良かったら教えてください！(>_<)

Answer 1

SVG の図形の移動は SVG の表示倍率によって HTML DOM の座標系とズレが生じるので注意が必要です。

ViewBox 100x100 に対して、ブラウザでは 1000x800 とかに拡大されて表示されますので、移動距離にもその分の倍率がかかります。

今回の場合は移動距離に (100 / 表示サイズ) をかけると意図した移動距離になると思います。

ただ、SVG の場合はもっと簡単に座標計算する方法があるので、解説記事貼っておきますね。

• サンプルコードで学ぶ、SVGとHTML DOMの座標を相互変換する方法 - WPJ
• Vue.js SVG Drag w/ Touch (こちらの Codepen も参考になると思います)

今回の方法でやるならこんな感じになると思います。

<svg ref="svg" ...

// 中略

interface Point {
  x: number;
  y: number;
}

const isElement = (x: any): x is Element =>
  x instanceof Element;

@Component
export default class LineSvgPractice extends Vue {
    // 中略

    ratio: Point = { x: 1, y: 1 };

    mounted() {
      // マウント完了したら this.updateRatio を呼ぶ
      // window のリサイズイベントなどが行われた場合にも呼ぶ必要有り
      this.updateRatio();
    }

    // SVG の表示サイズを取得して倍率を保存
    protected updateRatio() {
      const { svg } = this.$refs;

      if (!isElement(svg)) return;

      this.ratio = {
        x: 100 / svg.clientWidth,
        y: 100 / svg.clientHeight,
      };
    }

    // 中略

   public resize(event: MouseEvent) {
      if (this.point1ActiveFlag) {
        // 移動距離に保存してある倍率をかける
        this.point1XNow = this.point1XBefore + (event.clientX - this.pointStartX) * this.ratio.x;
        this.point1YNow = this.point1YBefore + (event.clientY - this.pointStartY) * this.ratio.y;
        this.line1XNow = this.line1XBefore + (event.clientX - this.pointStartX)* this.ratio.x;
        this.line1YNow = this.line1YBefore + (event.clientY - this.pointStartY) * this.ratio.y;
      }

Comments

[退会済みユーザー]

迅速な回答をくださり本当にありがとうございます。
返信が遅くなり申し訳ないです、今から見てみます(>_<)

[退会済みユーザー]

すみません、まず

const isElement = (x: any): x is Element =>
x instanceof Element;

ですが、これはisElementという名前のメソッドとして解釈してよろしいでしょうか。
これは返り値の型が x is Element なのでしょうか。
メソッドの中身では、何もreturnしてませんが...。

そして

protected updateRatio() {
const { svg } = this.$refs;

if (!isElement(svg)) return;

this.ratio = {
x: 100 / svg.clientWidth,
y: 100 / svg.clientHeight,
};
}

についてですが、

const { svg } = this.$refs;

これはまず、this.$refsで得られるオブジェクトのうち、svgというキー値？のものを、const svgに格納できるのでしょうか。

if (!isElement(svg)) return;

あとこれについてですが、なぜこの一文を入れると、この後、svgは型をもつことができるのでしょうか。
(x: 100 / svg.clientWidth,
y: 100 / svg.clientHeight,
の型エラーが消える)

たくさん質問してすみません(T_T)
調べていたのですがなかなかに難しくて...(T_T)

[yhg]

isElement はタイプガードを使った関数です。タイプガードの詳細についてはこちらを見ると良いでしょう。
http://js.studio-kingdom.com/typescript/handbook/advanced_types#type_guards_and_differentiating_types

簡単に説明するとタイプガードを使うと、キャストと違い安全に型を確定させることができます。今回の場合は
Vue | Element | Vue[] | Element[]
という元の型のうち、 Element のときだけ続きを実行したかったのでこのようになりました。

$refs の部分はその認識で大丈夫です。
ちなみに右辺が配列のときは、左辺で [] を使うと同じようなことができます。

[退会済みユーザー]

ありがとうございます、少し分かってきました...
コードもすごい満足に動きました(T___T)
本当にありがとうございました

[kaorun343]

こんにちは。

`$refs` ですが、このissueで書いたように型定義をすることができます。参考までに。
https://github.com/vuejs/vue-class-component/issues/94