뇌운동일지

canvas, mxGraph 본문

purple duck 일지

canvas, mxGraph

purpleduck 2021. 9. 28. 10:14

canvas 참고자료

1. Fabric.js

http://fabricjs.com/

 

Fabric.js Javascript Canvas Library

Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of hundreds or thousands of simple paths or good old images You can add text and dynamically manipulate its size, alignment,

fabricjs.com

장점) 1. 속도 2. 그려지는 객체들을 하나하나 객체화시킴.

대형 프로젝트에는 부적합하다고 한다. 

 

2. mxGraph

https://jgraph.github.io/mxgraph/

 

mxGraph 4.2.2

Version 4.2.2 – 28. October 2020 mxGraph 4.2.2 mxGraph is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. Documentatio

jgraph.github.io

 

3. GoJS

https://gojs.net/latest/

 

GoJS

GoJS A Web Framework for Rapidly Building Interactive Diagrams

gojs.net

 

< 따라해본 canvas 예제 >

1. canvas에 그림 그리기

https://dev.to/reiallenramos/drawing-in-vue-using-mousemove-event-34cg

 

How to use HTML Canvas with Vue

HTML 5's Canvas API is an amazing tool for creating graphics on a page. From drawing basic shapes and...

dev.to

 

2. resizing circle 

https://rintiantta.github.io/jpub-vue/examples/canvas.html#%EB%8D%B0%EB%AA%A8

 

고양이도 할 수 있는 Vue.js

 

rintiantta.github.io

 

 

<참고한 Fabric.js 예제>

https://itstudy-mary.tistory.com/365

 

<mxGraph 예제>

1강부터 보았다. 

https://www.youtube.com/watch?v=ZnDTxbzvyfc&list=PLl7YvtNnYTsq6RQL-bDPNB2DK3pO9NLOl&index=3

2강 따라하다보면, editor_ko.txt 와 graph_ko.txt 가 필요함. 

구글에 냅다 파일명 써서 이거 나오길래 가져다 넣었더니 됨. 

https://fintech.bottalks.co.kr/modules/chatbot/lib/mxDraw/src/resources/

 

--> 

vue-form-wizard 사용하기로 함. 

https://binarcode.github.io/vue-form-wizard/#/?id=direct-script-include 

 

vue-form-wizard - A vue based tab/form wizard

 

binarcode.github.io

 

https://codesandbox.io/examples/package/vue-form-wizard

 

vue-form-wizard examples - CodeSandbox

 

codesandbox.io

 

"export 'default' (imported as 'Vue') was not found in 'vue'

예제들이 vue2 기반으로 작성되어 있어 vue3에 맞게 수정 필요. : 그냥 프로젝트를 vue2로 생성하기로 결정

https://dev.to/daniel_adekoya_/how-to-initialize-vuex-in-the-new-vue-3-preview-49ef

 

How to use and initialize vuex in the new vue 3 preview

As we all know, vue js realeased their new vue 3 package (no longer in beta) and is packed with new f...

dev.to

 

vue + mxGraph

https://gitlab.com/lih1989/vue-mxgraph-example

 

Ivan Likhomanov / vue-mxgraph-example

Example use Vue.js + MxGraph

gitlab.com

 

+ 추가 

VSCode에서 Shift + 1 + Tab 으로 html 기본구조 자동완성

VSCode 자동정렬 : Shift + Alt + F (전에는 Shift + k + f 로 되더니 지멋대로이구나)

'purple duck 일지' 카테고리의 다른 글

스크립트 실행 시 보안 오류 (PSSecurityException, UnauthorizedAccess)  (0) 2021.09.28
website에서 EC2 정보조회 과제확인  (0) 2021.09.28
초기상태 window10에서 github에 있는 프로젝트를 local로 가져오기  (0) 2021.09.27
과제2: MongoDB Data 를 jqxGrid 에 출력 : 단계별 참고자료, 진행과정  (0) 2021.06.29
EC2정보조회  (0) 2021.06.28
'purple duck 일지' Related Articles more
Comments