回答編集履歴

3

一部修正

2018/12/21 06:26

投稿

shou6
shou6

score305

test CHANGED
@@ -340,15 +340,47 @@
340
340
 
341
341
  export const mutations = {
342
342
 
343
- setTemplate(state, template) {
343
+ setTemplate(state, payload) {
344
-
344
+
345
- state.template = template
345
+ state.template = payload
346
-
346
+
347
- },
347
+ },
348
-
348
+
349
- setSize(state, size) {
349
+ setSize(state, payload) {
350
-
350
+
351
- state.template = {
351
+ state.template = payload
352
+
353
+ },
354
+
355
+ setTypeColor(state, payload) {
356
+
357
+ // ここは何がやりたいのか不明の為触れません
358
+
359
+ },
360
+
361
+ setFlag(state, payload) {
362
+
363
+ state.list_flag = payload
364
+
365
+ }
366
+
367
+ }
368
+
369
+
370
+
371
+ export const actions = {
372
+
373
+ writeTemplate({ commit }, template) {
374
+
375
+ commit("setTemplate", template)
376
+
377
+ },
378
+
379
+
380
+
381
+ writeSize({ commit, state }, size) {
382
+
383
+ commit("setSize", {
352
384
 
353
385
  id: state.template.id,
354
386
 
@@ -358,33 +390,23 @@
358
390
 
359
391
  layers: state.template.layers ? state.template.layers : []
360
392
 
361
- }
393
+ })
362
-
394
+
363
- },
395
+ },
364
-
396
+
397
+
398
+
365
- setTypeColor(state, type) {
399
+ changeTypeColor({ commit }, color) {
366
-
367
- switch (type) {
400
+
368
-
369
- case "logo":
370
-
371
- return state.colors.logo
372
-
373
- case "text":
374
-
375
- return state.colors.text
376
-
377
- case "image":
378
-
379
- return state.colors.image
401
+ // ここは何がやりたいのか不明の為触れません
380
-
381
- }
402
+
382
-
383
- },
403
+ },
384
-
404
+
405
+
406
+
385
- setFlag(state, flag) {
407
+ changeFlag({ commit }, flag) {
386
-
408
+
387
- state.list_flag = flag
409
+ commit("setFlag", flag)
388
410
 
389
411
  }
390
412
 
@@ -392,44 +414,6 @@
392
414
 
393
415
 
394
416
 
395
- export const actions = {
396
-
397
- writeTemplate({ commit }, template) {
398
-
399
- commit("setTemplate", template)
400
-
401
- },
402
-
403
-
404
-
405
- writeSize({ commit }, size) {
406
-
407
- commit("setSize", size)
408
-
409
- },
410
-
411
-
412
-
413
- changeTypeColor({ commit }, payload) {
414
-
415
- commit("setTypeColor", "#00FF00")
416
-
417
- },
418
-
419
-
420
-
421
- changeFlag({ commit }, flag) {
422
-
423
- commit("setFlag", flag)
424
-
425
- }
426
-
427
- }
428
-
429
-
430
-
431
417
  export const getters = {}
432
418
 
433
-
434
-
435
419
  ```

2

一部修正

2018/12/21 06:26

投稿

shou6
shou6

score305

test CHANGED
@@ -350,7 +350,7 @@
350
350
 
351
351
  state.template = {
352
352
 
353
- id: state.id,
353
+ id: state.template.id,
354
354
 
355
355
  width: size.width,
356
356
 

1

コード修正

2018/12/21 06:14

投稿

shou6
shou6

score305

test CHANGED
@@ -1,10 +1,10 @@
1
- どう変更をテストしたの分かりませんが、値の変更を取得出来ています。
1
+ おそらくこれで大丈夫と思います。
2
2
 
3
3
 
4
4
 
5
5
  ```vue
6
6
 
7
- # Main.vue
7
+ # Creative.vue
8
8
 
9
9
 
10
10
 
@@ -18,8 +18,6 @@
18
18
 
19
19
  </div>
20
20
 
21
- <el-button type="primary" @click="programTest">test</el-button>
22
-
23
21
  </div>
24
22
 
25
23
  </template>
@@ -44,8 +42,6 @@
44
42
 
45
43
  watch: {
46
44
 
47
- //watchでローカルデータのtemplateが変更した際にメソッドを発火させる
48
-
49
45
  template(val) {
50
46
 
51
47
  console.log(val)
@@ -66,76 +62,60 @@
66
62
 
67
63
  methods: {
68
64
 
69
- programTest() {
65
+ draw() {
70
-
71
- this.$store.commit("creative/setTemplate", {
66
+
72
-
73
- id: "test",
67
+ console.log("ikeruyo")
74
-
68
+
75
- width: 500,
69
+ this.ctx.canvas.width = this.template.width
70
+
76
-
71
+ this.ctx.canvas.height = this.template.height
72
+
77
- height: 300,
73
+ this.ctx.beginPath()
74
+
78
-
75
+ this.ctx.clearRect(0, 0, this.template.width, this.template.height)
76
+
79
- layers: []
77
+ this.template.layers.forEach(layer => {
78
+
79
+ this.ctx.strokeStyle = this.test(layer.type)
80
+
81
+ this.ctx.strokeRect(layer.x_position, layer.y_position, layer.width, layer.height)
80
82
 
81
83
  })
82
84
 
85
+ this.ctx.fill()
86
+
83
87
  },
84
88
 
85
- draw() {
89
+ createImage() {
86
-
90
+
87
- console.log("ikeruyo")
91
+ console.log(this.template)
92
+
88
-
93
+ html2canvas(document.querySelector("#preview")).then(canvas => {
94
+
95
+ const result = document.querySelector("#result")
96
+
89
- this.ctx.canvas.width = this.template.width
97
+ result.innerHTML = ""
90
-
98
+
91
- this.ctx.canvas.height = this.template.height
99
+ const image = result.appendChild(canvas)
100
+
101
+
102
+
92
-
103
+ const canvasImage = document.getElementById("result").firstElementChild
104
+
93
- this.ctx.beginPath()
105
+ const link = document.createElement("a")
94
-
106
+
107
+
108
+
95
- this.ctx.clearRect(0, 0, this.template.width, this.template.height)
109
+ link.href = canvasImage.toDataURL("image/png")
96
-
97
- this.template.layers.forEach(layer => {
110
+
98
-
99
- this.ctx.strokeStyle = this.test(layer.type)
111
+ link.download = "test.png"
100
-
112
+
101
- this.ctx.strokeRect(layer.x_position, layer.y_position, layer.width, layer.height)
113
+ link.click()
102
114
 
103
115
  })
104
116
 
105
- this.ctx.fill()
106
-
107
117
  },
108
118
 
109
- createImage() {
110
-
111
- console.log(this.template)
112
-
113
- html2canvas(document.querySelector("#preview")).then(canvas => {
114
-
115
- const result = document.querySelector("#result")
116
-
117
- result.innerHTML = ""
118
-
119
- const image = result.appendChild(canvas)
120
-
121
-
122
-
123
- const canvasImage = document.getElementById("result").firstElementChild
124
-
125
- const link = document.createElement("a")
126
-
127
-
128
-
129
- link.href = canvasImage.toDataURL("image/png")
130
-
131
- link.download = "test.png"
132
-
133
- link.click()
134
-
135
- })
136
-
137
- },
138
-
139
119
  test(t) {
140
120
 
141
121
  switch (t) {
@@ -144,20 +124,14 @@
144
124
 
145
125
  return "#CC7777"
146
126
 
147
- break
148
-
149
127
  case "logo":
150
128
 
151
129
  return "#77CC77"
152
130
 
153
- break
154
-
155
131
  case "image":
156
132
 
157
133
  return "#7777CC"
158
134
 
159
- break
160
-
161
135
  }
162
136
 
163
137
  }
@@ -198,12 +172,128 @@
198
172
 
199
173
  </style>
200
174
 
201
-
202
-
203
175
  ```
204
176
 
205
177
 
206
178
 
179
+ ```vue
180
+
181
+ # Change.vue
182
+
183
+
184
+
185
+ <template>
186
+
187
+ <div>
188
+
189
+ <div v-for="(size,index) in creative_data.sizes" :key="index">
190
+
191
+ <el-button
192
+
193
+ class="size"
194
+
195
+ :style="{
196
+
197
+ width: size.width / 3 + 'px',
198
+
199
+ height: size.height / 3 + 'px',
200
+
201
+ }"
202
+
203
+ @click="sizeChange(size)"
204
+
205
+ >{{ size.width }}×{{ size.height }}</el-button>
206
+
207
+ </div>
208
+
209
+ </div>
210
+
211
+ </template>
212
+
213
+
214
+
215
+ <script>
216
+
217
+ export default {
218
+
219
+ data() {
220
+
221
+ return {
222
+
223
+ radius: 3,
224
+
225
+ creative_data: {
226
+
227
+ sizes: [
228
+
229
+ {
230
+
231
+ width: 300,
232
+
233
+ height: 400
234
+
235
+ },
236
+
237
+ {
238
+
239
+ width: 300,
240
+
241
+ height: 100
242
+
243
+ },
244
+
245
+ {
246
+
247
+ width: 400,
248
+
249
+ height: 500
250
+
251
+ },
252
+
253
+ {
254
+
255
+ width: 200,
256
+
257
+ height: 200
258
+
259
+ },
260
+
261
+ {
262
+
263
+ width: 100,
264
+
265
+ height: 500
266
+
267
+ }
268
+
269
+ ]
270
+
271
+ }
272
+
273
+ }
274
+
275
+ },
276
+
277
+ mounted() {},
278
+
279
+ methods: {
280
+
281
+ sizeChange(size) {
282
+
283
+ this.$store.dispatch("creative/writeSize", size)
284
+
285
+ }
286
+
287
+ }
288
+
289
+ }
290
+
291
+ </script>
292
+
293
+ ```
294
+
295
+
296
+
207
297
  ```js
208
298
 
209
299
  # store/creative.js
@@ -214,13 +304,31 @@
214
304
 
215
305
  template: {
216
306
 
217
- id: "",
307
+ id: 2,
218
-
308
+
219
- width: 0,
309
+ width: 200,
220
-
310
+
221
- height: 0,
311
+ height: 200,
222
-
312
+
223
- layers: []
313
+ layers: [
314
+
315
+ { type: "logo", width: 50, height: 50, x_position: 10, y_position: 5, z_index: 1 },
316
+
317
+ { type: "image", width: 20, height: 20, x_position: 10, y_position: 100, z_index: 0 },
318
+
319
+ { type: "image", width: 60, height: 30, x_position: 10, y_position: 150, z_index: 2 }
320
+
321
+ ]
322
+
323
+ },
324
+
325
+ colors: {
326
+
327
+ logo: "#FF0000",
328
+
329
+ text: "#00FF00",
330
+
331
+ image: "#0000FF"
224
332
 
225
333
  },
226
334
 
@@ -230,9 +338,55 @@
230
338
 
231
339
 
232
340
 
233
- export const getters = {
341
+ export const mutations = {
342
+
234
-
343
+ setTemplate(state, template) {
344
+
235
-
345
+ state.template = template
346
+
347
+ },
348
+
349
+ setSize(state, size) {
350
+
351
+ state.template = {
352
+
353
+ id: state.id,
354
+
355
+ width: size.width,
356
+
357
+ height: size.height,
358
+
359
+ layers: state.template.layers ? state.template.layers : []
360
+
361
+ }
362
+
363
+ },
364
+
365
+ setTypeColor(state, type) {
366
+
367
+ switch (type) {
368
+
369
+ case "logo":
370
+
371
+ return state.colors.logo
372
+
373
+ case "text":
374
+
375
+ return state.colors.text
376
+
377
+ case "image":
378
+
379
+ return state.colors.image
380
+
381
+ }
382
+
383
+ },
384
+
385
+ setFlag(state, flag) {
386
+
387
+ state.list_flag = flag
388
+
389
+ }
236
390
 
237
391
  }
238
392
 
@@ -240,30 +394,42 @@
240
394
 
241
395
  export const actions = {
242
396
 
243
-
397
+ writeTemplate({ commit }, template) {
398
+
399
+ commit("setTemplate", template)
400
+
401
+ },
402
+
403
+
404
+
405
+ writeSize({ commit }, size) {
406
+
407
+ commit("setSize", size)
408
+
409
+ },
410
+
411
+
412
+
413
+ changeTypeColor({ commit }, payload) {
414
+
415
+ commit("setTypeColor", "#00FF00")
416
+
417
+ },
418
+
419
+
420
+
421
+ changeFlag({ commit }, flag) {
422
+
423
+ commit("setFlag", flag)
424
+
425
+ }
244
426
 
245
427
  }
246
428
 
247
429
 
248
430
 
249
- export const mutations = {
431
+ export const getters = {}
250
-
251
- setTemplate(state, payload) {
432
+
252
-
253
- state.template = payload
433
+
254
-
255
- }
256
-
257
- }
258
434
 
259
435
  ```
260
-
261
-
262
-
263
- ボタンクリックでstoreのmutationsを使ってtemplateを更新。
264
-
265
- watchしているので、console.logで値の表示と、this.drawが実行されているのを確認。
266
-
267
-
268
-
269
- ![イメージ説明](de059caad8859eb2e525f99d767682a4.png)