{"id":10465,"date":"2020-07-08T23:00:40","date_gmt":"2020-07-08T14:00:40","guid":{"rendered":"http:\/\/www.moonmile.net\/blog\/?p=10465"},"modified":"2020-07-08T23:23:35","modified_gmt":"2020-07-08T14:23:35","slug":"vue-js-%e3%81%a7%e5%ad%90%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%8b%e3%82%89%e8%a6%aa%e3%81%ab%e5%80%a4%e3%82%92%e9%80%81%e3%82%8b%ef%bc%88svg%e7%b7%a8%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.moonmile.net\/blog\/archives\/10465","title":{"rendered":"Vue.js \u3067\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u89aa\u306b\u5024\u3092\u9001\u308b\uff08SVG\u7de8\uff09"},"content":{"rendered":"

\u3053\u306e\u624b\u306e\u8a18\u4e8b\u306f\u7d50\u69cb\u3042\u308b\u306e\u3060\u3051\u3069\u3001\u6bce\u5ea6\u5fd8\u308c\u3066\u3057\u307e\u3046\u306e\u3067\u5099\u5fd8\u9332\u7684\u306b\u3002<\/p>\n

\u3084\u308a\u305f\u3044\u3053\u3068<\/h2>\n

\u3053\u3093\u306a\u98a8\u306bSVG\u306b\u30d4\u30f3\u3092\u7f6e\u304d\u307e\u3059\u3002Vue.js \u3092\u4f7f\u3063\u3066\u3001SVG\u753b\u50cf\u306e\u30d4\u30f3\u306e\u4f4d\u7f6e\u3092\u89aa\u306e App.vue \u306b\u4f1d\u3048\u307e\u3059\u3002<\/p>\n

<\/a><\/p>\n

App.vue<\/h2>\n

\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08App.vue\uff09\u306e\u30c7\u30fc\u30bf\u3067\u6301\u3064\u306e\u306f map_x \u3068 map_y \u3067\u3001data() \u306e\u623b\u308a\u5024\u3067\u4fdd\u6301\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u305d\u306e\u307e\u307e App.vue \u5185\u3067 {{map_x}} \u3067\u53c2\u7167\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n

\u65b9\u773c\u7d19\u3068\u30d4\u30f3\u3067\u8868\u793a\u306f Hello.vue \u3067\u6307\u5b9a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002
\nHello.vue \u5074\u306f max_x \u3068 max_y \u30d7\u30ed\u30d1\u30c6\u30a3\u3001\u5909\u66f4\u3057\u305f\u3068\u304d\u306e\u30a4\u30d9\u30f3\u30c8\u3092 updatePos \u3067\u8fd4\u305b\u308b\u3088\u3046\u306b\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n

<template>\n  <div<\/span> id<\/span>=\"app\"<\/span>><\/span>\n    <div<\/span>><\/span>map_x: {{map_x}}<\/div<\/span>><\/span>\n    <div<\/span>><\/span>map_y: {{map_y}}<\/div<\/span>><\/span>\n    <Hello<\/span> \n     :map_x<\/span>=\"map_x\"<\/span> \n     :map_y<\/span>=\"map_y\"<\/span> \n     @updatePos<\/span>=\"updatePos\"<\/span> \/><\/span>\n  <\/div<\/span>><\/span><\/span>\n<\/template>\n\n<script>\nimport Hello from '.\/<\/span>components\/Hello.vue'\n\nexport default {\n  name: '<\/span>App',\n  components: {\n    Hello,\n  },\n  data() {\n    return {\n      map_x: 100,\n      map_y: 100,\n    };\n  },\n  methods: {\n    updatePos(x,y) {\n      this.map_x = x ;\n      this.map_y = y ;\n    }\n  }\n}\n<\/script>\n<\/span><\/code><\/pre>\n
Hello.vue<\/h2>\n
\u89aa\u306e App.vue \u304b\u3089 max_x \u3068 map_y \u3092\u53d7\u3051\u53d6\u308b\u306e\u304c\u30d7\u30ed\u30d1\u30c6\u30a3\u3067 props \u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002\u30d4\u30f3\u306f\u30de\u30a6\u30b9\u306e\u30af\u30ea\u30c3\u30af\uff08v-on:mousedown\uff09\u3067\u52d5\u304b\u305b\u308b\u3088\u3046\u306b\u3057\u3066\u3042\u308b\u306e\u3067\u3001\u5225\u9014\u30c7\u30fc\u30bf\u3068\u3057\u3066 pin_x \u3068 pin_y \u3092\u7528\u610f\u3057\u307e\u3059\u3002
\n\u30d7\u30ed\u30d1\u30c6\u30a3\u306e max_x \u3068 max_y \u306f\u89aa\u304b\u3089\u5f15\u304d\u6e21\u3055\u308c\u308b\u8aad\u307f\u53d6\u308a\u5c02\u7528\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u306a\u306e\u3067\u5225\u9014\u4ee3\u5165\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u5b9f\u969b\u306f\u3001pin_x \u3068 pin_y \u306f\u3001\u30d4\u30f3\u306e\u5148\u7aef\u306b\u5ea7\u6a19\u304c\u5408\u3046\u3088\u3046\u306b\u5c11\u3057\u88dc\u6b63\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n
<template>\n  <div<\/span>><\/span>\n    <h1<\/span>><\/span>Hello SVG<\/h1<\/span>><\/span>\n    <div<\/span>><\/span>\n      <svg<\/span>\n           ref<\/span>=\"pic\"<\/span>\n           viewBox<\/span>=\"0 0 600 400\"<\/span>\n           v-on:mousedown<\/span>=\"mousedown()\"<\/span>\n      ><\/span>\n            <image<\/span> \n              href<\/span>=\"@\/assets\/images\/hogan.jpg\"<\/span> \/><\/span>\n            <image<\/span>\n               :x<\/span>=\"pin_x\"<\/span>\n               :y<\/span>=\"pin_y\"<\/span>\n               width<\/span>=\"20px\"<\/span>\n               height<\/span>=\"58px\"<\/span>\n               href<\/span>=\"@\/assets\/images\/marker.svg\"<\/span>\n            \/><\/span>\n      <\/svg<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n<\/template>\n\n<script>\nexport default {\n  name: 'Hello',\n  props: {\n    map_x: Number,\n    map_y: Number,\n  },\n  data() {\n    return {\n      pin_x: this.map_x - 10 ,\n      pin_y: this.map_y - 40 ,\n    }\n  },\n  methods: {\n    mousedown() {\n        const vbox = this.$refs.pic.viewBox ;\n        const pic_w = vbox.baseVal.width ;\n        const pic_h = vbox.baseVal.height ;\n        var r = this.$refs.pic.getBoundingClientRect();\n        var x = Math.round(Math.round(event.clientX-r.left) * pic_w\/<\/span>r.width) ;\n        var<\/span> y = Math<\/span>.round(Math<\/span>.round(event.clientY-r.top)  * pic_h\/r.height);\n        this<\/span>.pin_x = x - 10<\/span> ;\n        this<\/span>.pin_y = y - 40<\/span> ;\n        this<\/span>.$emit('updatePos'<\/span>, x, y );\n    },\n  },\n}\n<\/script>\n<\/span><\/code><\/pre>\n
\u30de\u30a6\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306e mousedown \u95a2\u6570\u3067\u306f\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u5ea7\u6a19\u3092\u88dc\u6b63\u3059\u308b\u305f\u3081\u306b\u3061\u3087\u3063\u3068\u3084\u3084\u3053\u3057\u3044\u3053\u3068\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306e\u5ea7\u6a19\u3092\u8fd4\u3059\u305f\u3081\u306b\u3001this.$emit \u3067 updatePos \u30a4\u30d9\u30f3\u30c8\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n
Vue \u89aa\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u95a2\u4fc2\u306f MVVM \u30d1\u30bf\u30fc\u30f3\u3067\u306f\u306a\u3044<\/h2>\n
\u3064\u307e\u308a\u306f\u3001<\/p>\n