8000 . · rurusyu/image-editor-vue@5124ed9 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5124ed9

Browse files
TomboY90TomboY90
committed
.
1 parent 09c76ce commit 5124ed9

File tree

1 file changed

+101
-13
lines changed

1 file changed

+101
-13
lines changed

‎src/components/Canvas.vue

Lines changed: 101 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
<button @click="history('redo')">Redo</button>
1414
<button @click="loadObjects">이미지 불러오기</button>
1515
<button @click="copyObject">이미지 복사</button>
16-
<button @click="pasteObject">이미지 붙여넣기</button>
16+
<button @click="setIndex('forward')">한 단계 앞으로</button>
17+
<button @click="setIndex('backward')">한 단계 뒤로</button>
18+
<button @click="setGroup">그룹으로 묶기</button>
19+
<button @click="setUngroup">그룹 해제</button>
1720
<sketch-picker v-if="colorPicker" v-model="colors" @input="setBackgroundColor" />
1821
</div>
1922
</template>
@@ -147,6 +150,10 @@ export default {
147150
},
148151
},
149152
created() {
153+
fabric.Object.prototype.getZIndex = function() {
154+
return this.canvas.getObjects().indexOf(this);
155+
}
156+
150157
fabric.Canvas.prototype.historyInit = function () {
151158
this.historyUndo = [];
152159
this.historyRedo = [];
@@ -158,10 +165,18 @@ export default {
158165
this.on({
159166
"object:added": this.historySaveAction,
160167
"object:removed": this.historySaveAction,
161-
"object:modified": this.historySaveAction
168+
"object:modified": this.historySaveAction,
162169
})
163170
}
164171
172+
// fabric.Canvas.prototype.getSelectedObject = function(evt) {
173+
// console.log('오브젝트 선택', evt.target.type);
174+
// if(evt.target.type === 'i-text') {
175+
// console.log('폰트 사이즈', evt.target.fontSize);
176+
// this.fontSize = evt.target.fontSize
177+
// }
178+
// }
179+
165180
fabric.Canvas.prototype.historyNext = function () {
166181
return JSON.stringify(this.toDatalessJSON(this.extraProps));
167182
}
@@ -220,7 +235,15 @@ export default {
220235
mounted() {
221236
this.ref = this.$refs.can;
222237
this.canvas = new fabric.Canvas(this.ref);
238+
239+
const objectSelectHandler = function (evt) {
240+
if(evt.target.type === 'i-text') {
241+
this.fontSize = evt.target.fontSize
242+
}
243+
};
244+
223245
this.canvas.historyInit();
246+
this.canvas.on("object:selected", objectSelectHandler)
224247
this.data = this.canvas;
225248
226249
let items = window.sessionStorage.getItem('testImg');
@@ -290,9 +313,18 @@ export default {
290313
},
291314
loadObjects() {
292315
const json = window.localStorage.getItem('_tempItems');
316+
const parsedJSON = JSON.parse(json) // JSON을 load 할땐 파싱하면 인식못하기에 파싱된 데이터는 따로 저장
317+
293318
if(json) {
294-
this.canvas.loadFromJSON(json, this.canvas.renderAll.bind(this.canvas), function(o, object) {
295-
fabric.log(o, object);
319+
this.canvas.loadFromJSON(json, this.canvas.renderAll.bind(this.canvas), (o, object) => {// eslint-disable-line no-unused-vars
320+
if(parsedJSON.backgroundImage) {
321+
this.canvas.setHeight(parsedJSON.backgroundImage.height);
322+
323+
this.canvas.setBackgroundImage(parsedJSON.backgroundImage.src, this.canvas.renderAll.bind(this.canvas), {
324+
scaleX: this.canvas.width / parsedJSON.backgroundImage.width,
325+
scaleY: this.canvas.height / parsedJSON.backgroundImage.height
326+
});
327+
}
296328
})
297329
}
298330
},
@@ -382,15 +414,53 @@ export default {
382414
this.canvas.renderAll();
383415
})
384416
},
385-
copyObject() {
386-
this.canvas.getActiveObject().clone(cloned => {
387-
console.log('왓?', cloned);
388-
this.clipboard = cloned;
417+
setGroup() {
418+
const activeObj = this.canvas.getActiveObject();
419+
console.log('여러개?', activeObj);
420+
421+
if(!activeObj) {
422+
return;
423+
}
424+
425+
const activegroup = activeObj.toGroup();
426+
console.log('그룹화?', activegroup);
427+
428+
const objectsInGroup = activegroup.getObjects();
429+
430+
activegroup.clone(newgroup => {
431+
this.canvas.remove(activegroup);
432+
433+
objectsInGroup.forEach(object => {
434+
this.canvas.remove(object);
435+
});
436+
this.canvas.add(newgroup);
389437
});
390438
},
439+
setUngroup() {
440+
const activeObject = this.canvas.getActiveObject();
391441
392-
pasteObject() {
393-
this.clipboard.clone(clonedObj => {
442+
if(!activeObject) {
443+
return;
444+
}
445+
446+
if(activeObject.type=="group"){
447+
const items = activeObject._objects;
448+
activeObject._restoreObjectsState();
449+
this.canvas.remove(activeObject);
450+
451+
for(let i = 0; i < items.length; i++) {
452+
this.canvas.add(items[i]);
453+
this.canvas.item(this.canvas.size()-1).hasControls = true;
454+
}
455+
this.canvas.renderAll();
456+
}
457+
},
458+
copyObject() {
459+
this.canvas.getActiveObject().clone(cloned => {
460+
console.log('cloned', cloned)
461+
// 복사 메서드 사용 F438 면 선택된 오브젝트가 인자로 넘어옴. 그게 바로 cloned
462+
// this.clipboard = cloned;
463+
cloned.clone(clonedObj => {
394464
this.canvas.discardActiveObject();
395465
clonedObj.set({
396466
left: clonedObj.left + 10,
@@ -406,12 +476,31 @@ export default {
406476
} else {
407477
this.canvas.add(clonedObj);
408478
}
409-
479+
410480
this.clipboard.top += 10;
411481
this.clipboard.left += 10;
412482
this.canvas.setActiveObject(clonedObj);
413483
this.canvas.requestRenderAll();
414484
});
485+
});
486+
},
487+
488+
setIndex(direction) {
489+
const activeObj = this.canvas.getActiveObject(); // 현재 선택된 오브젝트
490+
const zIndex = activeObj.getZIndex(); // 선택된 오브젝트의 z-index 값
491+
492+
if(direction === 'forward') {
493+
activeObj.moveTo(zIndex + 1);
494+
} else {
495+
activeObj.moveTo(zIndex - 1);
496+
}
497+
},
498+
getSelectedObject(evt) {
499+
console.log('오브젝트 선택', evt.target.type);
500+
if(evt.target.type === 'i-text') {
501+
console.log('폰트 사이즈', evt.target.fontSize);
502+
this.fontSize = evt.target.fontSize
503+
}
415504
}
416505
}
417506
}
@@ -424,5 +513,4 @@ export default {
424513
/* transform: rotate(0deg); */
425514
}
426515
427-
</style>
428-
516+
</style>

0 commit comments

Comments
 (0)
0