teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

一部修正

2018/12/21 06:26

投稿

shou6
shou6

スコア305

answer CHANGED
@@ -169,29 +169,17 @@
169
169
  })
170
170
 
171
171
  export const mutations = {
172
- setTemplate(state, template) {
172
+ setTemplate(state, payload) {
173
- state.template = template
173
+ state.template = payload
174
174
  },
175
- setSize(state, size) {
175
+ setSize(state, payload) {
176
- state.template = {
176
+ state.template = payload
177
- id: state.template.id,
178
- width: size.width,
179
- height: size.height,
180
- layers: state.template.layers ? state.template.layers : []
181
- }
182
177
  },
183
- setTypeColor(state, type) {
178
+ setTypeColor(state, payload) {
184
- switch (type) {
185
- case "logo":
186
- return state.colors.logo
187
- case "text":
188
- return state.colors.text
189
- case "image":
190
- return state.colors.image
179
+ // ここは何がやりたいのか不明の為触れません
191
- }
192
180
  },
193
- setFlag(state, flag) {
181
+ setFlag(state, payload) {
194
- state.list_flag = flag
182
+ state.list_flag = payload
195
183
  }
196
184
  }
197
185
 
@@ -200,12 +188,17 @@
200
188
  commit("setTemplate", template)
201
189
  },
202
190
 
203
- writeSize({ commit }, size) {
191
+ writeSize({ commit, state }, size) {
204
- commit("setSize", size)
192
+ commit("setSize", {
193
+ id: state.template.id,
194
+ width: size.width,
195
+ height: size.height,
196
+ layers: state.template.layers ? state.template.layers : []
197
+ })
205
198
  },
206
199
 
207
- changeTypeColor({ commit }, payload) {
200
+ changeTypeColor({ commit }, color) {
208
- commit("setTypeColor", "#00FF00")
201
+ // ここは何がやりたいのか不明の為触れません
209
202
  },
210
203
 
211
204
  changeFlag({ commit }, flag) {
@@ -214,5 +207,4 @@
214
207
  }
215
208
 
216
209
  export const getters = {}
217
-
218
210
  ```

2

一部修正

2018/12/21 06:26

投稿

shou6
shou6

スコア305

answer CHANGED
@@ -174,7 +174,7 @@
174
174
  },
175
175
  setSize(state, size) {
176
176
  state.template = {
177
- id: state.id,
177
+ id: state.template.id,
178
178
  width: size.width,
179
179
  height: size.height,
180
180
  layers: state.template.layers ? state.template.layers : []

1

コード修正

2018/12/21 06:14

投稿

shou6
shou6

スコア305

answer CHANGED
@@ -1,14 +1,13 @@
1
- どう変更をテストしたの分かりませんが、値の変更を取得出来ています。
1
+ おそらくこれで大丈夫と思います。
2
2
 
3
3
  ```vue
4
- # Main.vue
4
+ # Creative.vue
5
5
 
6
6
  <template>
7
7
  <div>
8
8
  <div class="canvas-frame">
9
9
  <canvas/>
10
10
  </div>
11
- <el-button type="primary" @click="programTest">test</el-button>
12
11
  </div>
13
12
  </template>
14
13
 
@@ -21,7 +20,6 @@
21
20
  }
22
21
  },
23
22
  watch: {
24
- //watchでローカルデータのtemplateが変更した際にメソッドを発火させる
25
23
  template(val) {
26
24
  console.log(val)
27
25
  this.draw()
@@ -32,14 +30,6 @@
32
30
  this.draw()
33
31
  },
34
32
  methods: {
35
- programTest() {
36
- this.$store.commit("creative/setTemplate", {
37
- id: "test",
38
- width: 500,
39
- height: 300,
40
- layers: []
41
- })
42
- },
43
33
  draw() {
44
34
  console.log("ikeruyo")
45
35
  this.ctx.canvas.width = this.template.width
@@ -71,13 +61,10 @@
71
61
  switch (t) {
72
62
  case "text":
73
63
  return "#CC7777"
74
- break
75
64
  case "logo":
76
65
  return "#77CC77"
77
- break
78
66
  case "image":
79
67
  return "#7777CC"
80
- break
81
68
  }
82
69
  }
83
70
  }
@@ -98,7 +85,65 @@
98
85
  }
99
86
  }
100
87
  </style>
88
+ ```
101
89
 
90
+ ```vue
91
+ # Change.vue
92
+
93
+ <template>
94
+ <div>
95
+ <div v-for="(size,index) in creative_data.sizes" :key="index">
96
+ <el-button
97
+ class="size"
98
+ :style="{
99
+ width: size.width / 3 + 'px',
100
+ height: size.height / 3 + 'px',
101
+ }"
102
+ @click="sizeChange(size)"
103
+ >{{ size.width }}×{{ size.height }}</el-button>
104
+ </div>
105
+ </div>
106
+ </template>
107
+
108
+ <script>
109
+ export default {
110
+ data() {
111
+ return {
112
+ radius: 3,
113
+ creative_data: {
114
+ sizes: [
115
+ {
116
+ width: 300,
117
+ height: 400
118
+ },
119
+ {
120
+ width: 300,
121
+ height: 100
122
+ },
123
+ {
124
+ width: 400,
125
+ height: 500
126
+ },
127
+ {
128
+ width: 200,
129
+ height: 200
130
+ },
131
+ {
132
+ width: 100,
133
+ height: 500
134
+ }
135
+ ]
136
+ }
137
+ }
138
+ },
139
+ mounted() {},
140
+ methods: {
141
+ sizeChange(size) {
142
+ this.$store.dispatch("creative/writeSize", size)
143
+ }
144
+ }
145
+ }
146
+ </script>
102
147
  ```
103
148
 
104
149
  ```js
@@ -106,30 +151,68 @@
106
151
 
107
152
  export const state = () => ({
108
153
  template: {
109
- id: "",
154
+ id: 2,
110
- width: 0,
155
+ width: 200,
111
- height: 0,
156
+ height: 200,
112
- layers: []
157
+ layers: [
158
+ { type: "logo", width: 50, height: 50, x_position: 10, y_position: 5, z_index: 1 },
159
+ { type: "image", width: 20, height: 20, x_position: 10, y_position: 100, z_index: 0 },
160
+ { type: "image", width: 60, height: 30, x_position: 10, y_position: 150, z_index: 2 }
161
+ ]
113
162
  },
163
+ colors: {
164
+ logo: "#FF0000",
165
+ text: "#00FF00",
166
+ image: "#0000FF"
167
+ },
114
168
  list_flag: ""
115
169
  })
116
170
 
117
- export const getters = {
171
+ export const mutations = {
118
-
172
+ setTemplate(state, template) {
173
+ state.template = template
174
+ },
175
+ setSize(state, size) {
176
+ state.template = {
177
+ id: state.id,
178
+ width: size.width,
179
+ height: size.height,
180
+ layers: state.template.layers ? state.template.layers : []
181
+ }
182
+ },
183
+ setTypeColor(state, type) {
184
+ switch (type) {
185
+ case "logo":
186
+ return state.colors.logo
187
+ case "text":
188
+ return state.colors.text
189
+ case "image":
190
+ return state.colors.image
191
+ }
192
+ },
193
+ setFlag(state, flag) {
194
+ state.list_flag = flag
195
+ }
119
196
  }
120
197
 
121
198
  export const actions = {
199
+ writeTemplate({ commit }, template) {
200
+ commit("setTemplate", template)
201
+ },
122
202
 
203
+ writeSize({ commit }, size) {
204
+ commit("setSize", size)
123
- }
205
+ },
124
206
 
125
- export const mutations = {
126
- setTemplate(state, payload) {
207
+ changeTypeColor({ commit }, payload) {
208
+ commit("setTypeColor", "#00FF00")
209
+ },
210
+
211
+ changeFlag({ commit }, flag) {
127
- state.template = payload
212
+ commit("setFlag", flag)
128
213
  }
129
214
  }
130
- ```
131
215
 
132
- ボタンクリックでstoreのmutationsを使ってtemplateを更新。
216
+ export const getters = {}
133
- watchしているので、console.logで値の表示と、this.drawが実行されているのを確認。
134
217
 
135
- ![イメージ説明](de059caad8859eb2e525f99d767682a4.png)
218
+ ```