캔버스 재설정 및 Fabric.js에서 JSON으로 다시로드

마이클 J. 칼 킨스

여러 뷰를 가질 수 있어야한다는 점을 제외하고는 kitchensink 예제와 같은 것을 구축하고 있습니다.

http://fabricjs.com/kitchensink

명함 : 앞면과 뒷면

편집 할 때 JSON을 주기적으로 저장합니다.

페이지를 다시로드하지 않고 뒷면을 편집하려면 (AngularJS를 사용하고 있기 때문에) 현재 캔버스를 지우고 새 JSON을 다시로드하려면 어떻게해야합니까?

현재 JSON을로드 중이며보기 변경을 클릭하고을 실행 canvas.clearContext()하고 새 JSON을 다시로드합니다. 이것은 내가 예상했던 방식으로 작동하지 않습니다.

최신 정보

이 캔버스를 관리하기 위해 지시문을 사용하고 있습니다. JSON을 사용할 수있을 때 지시문을 인스턴스화하고 어떤 이유로 든 JSON을 업데이트하려고하면 작동하지 않습니다.

나는 그것을 제거하고 지시문 자체를 비워 두었고 이제는 서비스를 통해 loadJson을 사용했습니다. 예이!

Kienz

일반적으로 canvas.loadFromJSON()새 개체를로드하기 전에 전체 캔버스를 지 웁니다. 그렇지 않으면 실행할 수 있습니다 canvas.clear();.

http://fabricjs.com/docs/fabric.Canvas.html#clear

JSON을 어떻게로드합니까?

다음과 같이 작동합니다.

var json = canvas.toJSON();

canvas.clear();

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

JSON을로드 한 후 canvas.renderAll(). 의 두 번째 매개 변수에서 canvas.loadFromJSON(json, callback)모든 객체가로드 / 추가 된 후 호출되는 cllback 함수를 정의 할 수 있습니다.

http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Fabric.js에서 서로 위에 두 개의 캔버스

분류에서Dev

JS 애니메이션을 빈 캔버스로 재설정

분류에서Dev

캔버스에서 자동으로 그림 크기 조정 및 정렬

분류에서Dev

fabric.js로 캔버스의 그리기 커서 변경

분류에서Dev

fabric.js에서 캔버스로 이미지를 저장하는 방법

분류에서Dev

iPad 및 iPhone에서 Fabric.js 캔버스가 깜박임

분류에서Dev

fabric.js를 사용하여 캔버스에서 이미지를 고정, 드래그 및 선택 불가능하게 만드는 방법

분류에서Dev

fabric.js에서 캔버스에 개체 정렬

분류에서Dev

Tkinter에서 캔버스 크기 조정 및 다시 그리기

분류에서Dev

SVG가 Fabric.js를 사용하여 캔버스에서 제대로 렌더링되지 않습니다.

분류에서Dev

캔버스를 기준으로 레이어 정렬 및 배포

분류에서Dev

Fabric.js : 캔버스에 새 이미지를 설정하지만 캔버스는 변경되지 않습니다.

분류에서Dev

한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

분류에서Dev

한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

분류에서Dev

캔버스에서 가로 및 세로 늘이기

분류에서Dev

변경 Vue.js + HTML 범위에 캔버스 다시로드

분류에서Dev

html5에서 한 캔버스 내부의 개체를 다른 캔버스로 이동 및 놓기

분류에서Dev

다시로드시 C # 정적 메서드 재설정 필드

분류에서Dev

Fabric-js 패턴 : Zoom 및 Blured Rect에 따라 크기가없는 Rects에서 캔버스 배경 패턴을 만드는 방법

분류에서Dev

WPF C #의 설정으로 캔버스에 자식 이미지 추가

분류에서Dev

이미지를 삽입하고 캔버스에 원으로 설정

분류에서Dev

캔버스 내 UI 요소의 X 및 Y 좌표를 프로그래밍 방식으로 설정

분류에서Dev

Phonegap 핀치 및 확대 / 축소로 캔버스 크기 조정

분류에서Dev

CSS 위치를 js로 만든 캔버스에 고정으로 변경

분류에서Dev

CSS 재설정으로 Chrome 및 Firefox에서 요소 위치가 다릅니다.

분류에서Dev

fabric.js에서 svg 파일로드 및 저장

분류에서Dev

FabricJS v.2 및 AngularJS – 캔버스 배경 이미지를 동적으로 설정

분류에서Dev

캔버스에서 이미지로드

분류에서Dev

javafx에서 캔버스 및 텍스트로 작업하는 방법

Related 관련 기사

  1. 1

    Fabric.js에서 서로 위에 두 개의 캔버스

  2. 2

    JS 애니메이션을 빈 캔버스로 재설정

  3. 3

    캔버스에서 자동으로 그림 크기 조정 및 정렬

  4. 4

    fabric.js로 캔버스의 그리기 커서 변경

  5. 5

    fabric.js에서 캔버스로 이미지를 저장하는 방법

  6. 6

    iPad 및 iPhone에서 Fabric.js 캔버스가 깜박임

  7. 7

    fabric.js를 사용하여 캔버스에서 이미지를 고정, 드래그 및 선택 불가능하게 만드는 방법

  8. 8

    fabric.js에서 캔버스에 개체 정렬

  9. 9

    Tkinter에서 캔버스 크기 조정 및 다시 그리기

  10. 10

    SVG가 Fabric.js를 사용하여 캔버스에서 제대로 렌더링되지 않습니다.

  11. 11

    캔버스를 기준으로 레이어 정렬 및 배포

  12. 12

    Fabric.js : 캔버스에 새 이미지를 설정하지만 캔버스는 변경되지 않습니다.

  13. 13

    한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

  14. 14

    한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

  15. 15

    캔버스에서 가로 및 세로 늘이기

  16. 16

    변경 Vue.js + HTML 범위에 캔버스 다시로드

  17. 17

    html5에서 한 캔버스 내부의 개체를 다른 캔버스로 이동 및 놓기

  18. 18

    다시로드시 C # 정적 메서드 재설정 필드

  19. 19

    Fabric-js 패턴 : Zoom 및 Blured Rect에 따라 크기가없는 Rects에서 캔버스 배경 패턴을 만드는 방법

  20. 20

    WPF C #의 설정으로 캔버스에 자식 이미지 추가

  21. 21

    이미지를 삽입하고 캔버스에 원으로 설정

  22. 22

    캔버스 내 UI 요소의 X 및 Y 좌표를 프로그래밍 방식으로 설정

  23. 23

    Phonegap 핀치 및 확대 / 축소로 캔버스 크기 조정

  24. 24

    CSS 위치를 js로 만든 캔버스에 고정으로 변경

  25. 25

    CSS 재설정으로 Chrome 및 Firefox에서 요소 위치가 다릅니다.

  26. 26

    fabric.js에서 svg 파일로드 및 저장

  27. 27

    FabricJS v.2 및 AngularJS – 캔버스 배경 이미지를 동적으로 설정

  28. 28

    캔버스에서 이미지로드

  29. 29

    javafx에서 캔버스 및 텍스트로 작업하는 방법

뜨겁다태그

보관