위챗 미니 프로그램 캔버스 개발 시 주의사항을 소개합니다.

미니 프로그램 개발 튜토리얼캔버스 개발 시 주의사항을 소개하는 칼럼

관련 학습 추천: 미니 프로그램 개발 튜토리얼

WeChat 미니 프로그램 wxcanvas

테스트 전화는 IPHONE6, 개발자 도구 버전 0.10.102800입니다. 개발자 도구 버전 0.11.112301도 마찬가지입니다

WeChat 애플릿의 캔버스는 h5 캔버스와 여러 면에서 다릅니다. 이하 WeChat 애플릿의 캔버스를 wxcanvas라고 합니다

다음은 모두 유용한 정보입니다. 조금씩 테스트했습니다. 인내심을 갖고 지켜보세요.

1.wxcanvas에는 h5canvas와 같은 너비 및 높이 속성과 너비 및 높이 스타일이 없습니다.

2. wxcanvas를 실제 H5canvas로 생각하지 말고, 너비와 높이를 변경하는 것들도 존재합니다. 즉, 여기에 다시 그리기가 있지만 구체적으로 구현하는 방법을 모르겠습니다.

3. wxcanvas 스타일의 너비와 높이를 변경해도 원본 캔버스에 있는 항목의 크기는 변경되지 않습니다.

4. CSS 변환 변환의 변경 큰 축소는 원본 캔버스에 있는 항목의 크기를 변경할 수 없습니다

5. 공식 설명: 컨텍스트는 메서드 호출을 기록하는 컨테이너일 뿐이며 그리기 동작을 기록하는 작업 배열을 생성하는 데 사용됩니다. 컨텍스트와 사이에는 대응 관계가 없습니다. 컨텍스트 생성 캔버스의 그리기 작업 배열은 여러 에 적용될 수 있습니다.

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

6. 참고

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

캔버스는 기본적으로 지워집니다. 지워야 할 필요성을 생각할 수 없습니다.

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

7. 비활성화-스크롤="true"와 바인딩터치무브="cvsMove"가 동시에 존재합니다. 페이지 이동을 방지하기 위해 catchtouchmove가 작동하지 않습니다위의 작성에서는 ccvsMove와 cvsMove가 모두 실행됩니다.

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

cvsMove는 page 없이 canvasTouch 이벤트 객체를 반환합니다. context.getActions()에서 반환된 배열은 인쇄해 보면 내용을 이해할 수 있다는 것을 알게 될 것입니다. 내부에서 배열을 직접 수정하여 그리기 작업을 변경할 수 있습니다

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

12.wx .canvasToTempFilePath

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

wx.canvasToTempFilePath 매개 변수는 canvasID, Success, Failure 및 Complete를 포함하는 개체로 wx.saveFile과 유사합니다.

위 내용은 위챗 미니 프로그램 캔버스 개발 시 주의사항을 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!