집 > 기사 > 위챗 애플릿 > WeChat 미니 프로그램 캔버스 개발에 대해

WeChat 미니 프로그램 캔버스 개발에 대해

不言원래의: 2018-06-22 16:31:161851검색

이 글에서는 주로 WeChat 미니 프로그램 wxcanvas의 개발 사례와 주의 사항을 소개합니다. 여기에서는 WeChat 캔버스를 H5의 캔버스와 비교하고 주의 사항을 설명합니다.

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: &#39;target&#39;,
　　actions: context.getActions()
});

캔버스는 기본적으로 지워집니다. 지워야 할 필요는 생각하지 마세요

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

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

참고, 비활성화 스크롤 ="true"와 bindtouchmove="cvsMove"가 동시에 존재하는 경우에만 페이지 이동을 방지할 수 있습니다.

위의 쓰기로는 작동하지 않습니다.

ccvsMove는 pageX, clientX 등을 포함한 일반 터치 이벤트 개체를 반환하고,

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

만 반환합니다. 8.

wx.drawCanvas({
  canvasId: &#39;target&#39;,
  actions: [],
  reserve:false
});

캔버스 및 캔버스 상태를 지울 수 있습니다

9. 캔버스 회전 등의 크기 조정 상태, 예약 시: true, 마지막 상태부터 계속됩니다

10. context.getActions()에서 반환된 배열은 매우 유용합니다. 인쇄하면 내부 내용을 이해할 수 있습니다.

11.wx.drawCanvas 컨텍스트를 변경하기 위해 배열을 직접 수정할 수 있습니다. .drawImage는 휴대폰에서는 그릴 수 있지만 컴퓨터 개발 도구에서는 그릴 수 없습니다.

12.wx.canvasToTempFilePath

공식 문서에는 한 줄만 있는데

wx.canvasToTempFilePath 매개 변수는 다음과 같습니다. one 개체에는 wx.saveFile과 유사한 canvasID, 성공, 실패 및 완료가 포함됩니다.

      wx.canvasToTempFilePath({
       canvasId: &#39;target&#39;,
       success: function success(res) {
        wx.saveFile({
         tempFilePath: res.tempFilePath,
         success: function success(res) {
          console.log(&#39;saved::&#39; + res.savedFilePath);
         },
         complete: function fail(e) {
          console.log(e.errMsg);
         }
        });
       },
       complete: function complete(e) {
        console.log(e.errMsg);
       }
      });

위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 주목하세요!

WeChat 미니 프로그램 캔버스 개발에 대해

관련 기사