回答編集履歴

一部修正

2018/12/21 06:26

投稿

shou6

スコア305

test CHANGED Viewed

@@ -340,15 +340,47 @@
 export const mutations = {
-  setTemplate(state, template) {
+  setTemplate(state, payload) {
-    state.template = template
+    state.template = payload
-  },
+  },
-  setSize(state, size) {
+  setSize(state, payload) {
-    state.template = {
+    state.template = payload
+  },
+  setTypeColor(state, payload) {
+    // ここは何がやりたいのか不明の為触れません
+  },
+  setFlag(state, payload) {
+    state.list_flag = payload
+  }
+}
+export const actions = {
+  writeTemplate({ commit }, template) {
+    commit("setTemplate", template)
+  },
+  writeSize({ commit, state }, size) {
+    commit("setSize", {
       id: state.template.id,
@@ -358,33 +390,23 @@
       layers: state.template.layers ? state.template.layers : []
-    }
+    })
-  },
+  },
-  setTypeColor(state, type) {
+  changeTypeColor({ commit }, color) {
-    switch (type) {
-      case "logo":
-        return state.colors.logo
-      case "text":
-        return state.colors.text
-      case "image":
-        return state.colors.image
+    // ここは何がやりたいのか不明の為触れません
-    }
-  },
+  },
-  setFlag(state, flag) {
+  changeFlag({ commit }, flag) {
-    state.list_flag = flag
+    commit("setFlag", flag)
   }
@@ -392,44 +414,6 @@
-export const actions = {
-  writeTemplate({ commit }, template) {
-    commit("setTemplate", template)
-  },
-  writeSize({ commit }, size) {
-    commit("setSize", size)
-  },
-  changeTypeColor({ commit }, payload) {
-    commit("setTypeColor", "#00FF00")
-  },
-  changeFlag({ commit }, flag) {
-    commit("setFlag", flag)
-  }
-}
 export const getters = {}
 ```

一部修正

2018/12/21 06:26

投稿

shou6

スコア305

test CHANGED Viewed

@@ -350,7 +350,7 @@
     state.template = {
-      id: state.id,
+      id: state.template.id,
       width: size.width,

コード修正

2018/12/21 06:14

投稿

shou6

スコア305

test CHANGED Viewed

@@ -1,10 +1,10 @@
-どう変更をテストしたのか分かりませんが、値の変更を取得出来ています。
+おそらくこれで大丈夫かと思います。
 ```vue
-# Main.vue
+# Creative.vue
@@ -18,8 +18,6 @@
     </div>
-    <el-button type="primary" @click="programTest">test</el-button>
   </div>
 </template>
@@ -44,8 +42,6 @@
   watch: {
-    //watchでローカルデータのtemplateが変更した際にメソッドを発火させる
     template(val) {
       console.log(val)
@@ -66,76 +62,60 @@
   methods: {
-    programTest() {
+    draw() {
-      this.$store.commit("creative/setTemplate", {
-        id: "test",
+      console.log("ikeruyo")
-        width: 500,
+      this.ctx.canvas.width = this.template.width
+      this.ctx.canvas.height = this.template.height
-        height: 300,
+      this.ctx.beginPath()
+      this.ctx.clearRect(0, 0, this.template.width, this.template.height)
-        layers: []
+      this.template.layers.forEach(layer => {
+        this.ctx.strokeStyle = this.test(layer.type)
+        this.ctx.strokeRect(layer.x_position, layer.y_position, layer.width, layer.height)
       })
+      this.ctx.fill()
     },
-    draw() {
+    createImage() {
-      console.log("ikeruyo")
+      console.log(this.template)
+      html2canvas(document.querySelector("#preview")).then(canvas => {
+        const result = document.querySelector("#result")
-      this.ctx.canvas.width = this.template.width
+        result.innerHTML = ""
-      this.ctx.canvas.height = this.template.height
+        const image = result.appendChild(canvas)
+        const canvasImage = document.getElementById("result").firstElementChild
-      this.ctx.beginPath()
+        const link = document.createElement("a")
-      this.ctx.clearRect(0, 0, this.template.width, this.template.height)
+        link.href = canvasImage.toDataURL("image/png")
-      this.template.layers.forEach(layer => {
-        this.ctx.strokeStyle = this.test(layer.type)
+        link.download = "test.png"
-        this.ctx.strokeRect(layer.x_position, layer.y_position, layer.width, layer.height)
+        link.click()
       })
-      this.ctx.fill()
     },
-    createImage() {
-      console.log(this.template)
-      html2canvas(document.querySelector("#preview")).then(canvas => {
-        const result = document.querySelector("#result")
-        result.innerHTML = ""
-        const image = result.appendChild(canvas)
-        const canvasImage = document.getElementById("result").firstElementChild
-        const link = document.createElement("a")
-        link.href = canvasImage.toDataURL("image/png")
-        link.download = "test.png"
-        link.click()
-      })
-    },
     test(t) {
       switch (t) {
@@ -144,20 +124,14 @@
           return "#CC7777"
-          break
         case "logo":
           return "#77CC77"
-          break
         case "image":
           return "#7777CC"
-          break
       }
     }
@@ -198,12 +172,128 @@
 </style>
 ```
+```vue
+# Change.vue
+<template>
+  <div>
+    <div v-for="(size,index) in creative_data.sizes" :key="index">
+      <el-button
+        class="size"
+        :style="{
+        width: size.width / 3 + 'px',
+        height: size.height / 3 + 'px',
+      }"
+        @click="sizeChange(size)"
+      >{{ size.width }}×{{ size.height }}</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      radius: 3,
+      creative_data: {
+        sizes: [
+          {
+            width: 300,
+            height: 400
+          },
+          {
+            width: 300,
+            height: 100
+          },
+          {
+            width: 400,
+            height: 500
+          },
+          {
+            width: 200,
+            height: 200
+          },
+          {
+            width: 100,
+            height: 500
+          }
+        ]
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    sizeChange(size) {
+      this.$store.dispatch("creative/writeSize", size)
+    }
+  }
+}
+</script>
+```
 ```js
 # store/creative.js
@@ -214,13 +304,31 @@
   template: {
-    id: "",
+    id: 2,
-    width: 0,
+    width: 200,
-    height: 0,
+    height: 200,
-    layers: []
+    layers: [
+      { type: "logo", width: 50, height: 50, x_position: 10, y_position: 5, z_index: 1 },
+      { type: "image", width: 20, height: 20, x_position: 10, y_position: 100, z_index: 0 },
+      { type: "image", width: 60, height: 30, x_position: 10, y_position: 150, z_index: 2 }
+    ]
+  },
+  colors: {
+    logo: "#FF0000",
+    text: "#00FF00",
+    image: "#0000FF"
   },
@@ -230,9 +338,55 @@
-export const getters = {
+export const mutations = {
+  setTemplate(state, template) {
+    state.template = template
+  },
+  setSize(state, size) {
+    state.template = {
+      id: state.id,
+      width: size.width,
+      height: size.height,
+      layers: state.template.layers ? state.template.layers : []
+    }
+  },
+  setTypeColor(state, type) {
+    switch (type) {
+      case "logo":
+        return state.colors.logo
+      case "text":
+        return state.colors.text
+      case "image":
+        return state.colors.image
+    }
+  },
+  setFlag(state, flag) {
+    state.list_flag = flag
+  }
 }
@@ -240,30 +394,42 @@
 export const actions = {
+  writeTemplate({ commit }, template) {
+    commit("setTemplate", template)
+  },
+  writeSize({ commit }, size) {
+    commit("setSize", size)
+  },
+  changeTypeColor({ commit }, payload) {
+    commit("setTypeColor", "#00FF00")
+  },
+  changeFlag({ commit }, flag) {
+    commit("setFlag", flag)
+  }
 }
-export const mutations = {
+export const getters = {}
-  setTemplate(state, payload) {
-    state.template = payload
-  }
-}
 ```
-ボタンクリックでstoreのmutationsを使ってtemplateを更新。
-watchしているので、console.logで値の表示と、this.drawが実行されているのを確認。
-![イメージ説明](de059caad8859eb2e525f99d767682a4.png)