WeChat 미니 프로그램 캔버스 개발 사례 및 주의사항

위챗 애플릿 wxcanvas

테스트폰은 IPHONE6, 개발자툴 버전은 0.10.102800입니다. Developer Tools 버전 0.11.112301도 마찬가지입니다

WeChat 미니 프로그램의 캔버스와 h5가 아닌 캔버스는 많은 차이점이 있습니다. 아래에서는 WeChat 미니 프로그램의 캔버스를 wxcanvas라고 합니다

다음은 모두 내 것입니다. 약간의 테스트 결과를 인내심을 갖고 읽어보시기 바랍니다.

1.wxcanvas에는 h5canvas와 같은 너비 및 높이 속성과 너비 및 높이 스타일이 없습니다. 상자로 이해될 수 있는 스타일만 있습니다.

2. wxcanvas를 실제 H5canvas로 생각하지 말고, 범위를 그리는 것들도 존재한다고 생각하세요. 높이가 표시되거나 여기에 다시 그려지는데 어떻게 구현해야 할지 모르겠습니다.

3. wxcanvas 스타일의 너비와 높이를 변경해도 크기가 변경되지 않습니다.

4. CSS 변환 변환의 확대 및 축소는 원본 캔버스의 크기를 변경할 수 없습니다.

5. 그리기 동작 배열을 생성하고 기록하는 데 사용되는 메서드 호출을 기록합니다. 컨텍스트와 사이에는 대응 관계가 없습니다. 컨텍스트 생성 캔버스의 그리기 작업 배열은 여러 에 적용될 수 있습니다.

사실 context.getActions() 후에 컨텍스트의 정보가 지워집니다. 이를 재사용하려면 var temp=context.getActions()를 사용하여 작업 배열을 저장해야 합니다. wx .drawcanvas;

6. 참고

wx.drawCanvas({
　　canvasId: 'target',
　　actions: context.getActions()
});

기본적으로 캔버스가 지워집니다. 지우려면

rree

7. "핵심 사항"

rrree

비활성화-스크롤="true"와 바인딩터치무브="cvsMove"가 동시에 존재한다는 점에 유의하세요. 페이지 이동을 방지하기 위해 catchtouchmove는 작동하지 않습니다.

위의 작성 방식에서는 ccvsMove와 cvsMove가 모두 작동합니다.

ccvsMove는 pageX, clientX 등을 포함한 일반 터치 이벤트 개체를 반환합니다.

cvsMove는 canvasTouch 이벤트 개체를 반환하며, pageX, clientX는 없고 x, y만 반환합니다

8.

wx.drawCanvas({
  canvasId: 'target',
  actions: context.getActions(),
  reserve:true
});

예 캔버스 지우기 및 캔버스 상태 지우기

9. Reserve:true

10일 때 캔버스는 마지막 상태를 계속합니다. context.getActions()에서 반환된 배열은 매우 유용합니다. 이를 인쇄하면 내부 내용을 직접 이해할 수 있습니다. 배열을 수정하여 그리기 동작 변경

11. wx.drawCanvas의 경우 context.drawImage를 휴대폰에서는 그릴 수 있지만, 컴퓨터 개발 도구에서는 그릴 수 없습니다

12. wx.canvasToTempFilePath

공식 문서에는 한 줄만 있습니다.

wx.canvasToTempFilePath 매개변수는 canvasID, 성공, 실패, 완료를 포함하는 개체인 것으로 나타났습니다. .saveFile;

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style=&#39;width:{{width}}px;height:{{height}}px&#39;></canvas>

읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

더 많은 WeChat 미니 프로그램 캔버스 개발 사례 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!