WeChat 미니 프로그램 캔버스에 대한 자세한 소개

테스트 폰은 IPHONE6, 개발자 도구 버전 0.10.102800

WeChat 애플릿의 캔버스는 h5 캔버스와 여러 면에서 다릅니다.

다음은 제가 조금씩 테스트한 유용한 정보입니다. 인내심을 가지고 읽어주세요.

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()
});

는 기본적으로 캔버스를 지웁니다.

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

7. "핵심사항"

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

catchtouchmove가 페이지 이동을 방지하기 위해 비활성화-scroll="true"와 bindtouchmove="cvsMove"가 동시에 존재한다는 점에 유의하세요. 작동하지 않음

위 쓰기 방법을 사용하면 ccvsMove와 cvsMove가 모두 트리거됩니다.

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

cvsMove는 pageX, clientX 없이 canvasTouch 이벤트 객체를 반환합니다. x, y만

8.

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

는 캔버스와 캔버스의 상태

9. 캔버스의 크기 변환 회전 및 기타 상태는 예비로 :true가 마지막 상태에서 계속됩니다

10. )을 인쇄해 보면 그 안의 내용을 바로 알 수 있습니다.

11. wx.drawCanvas일 때. 휴대폰에서는 그릴 수 있지만 컴퓨터 개발툴에서는 그릴 수 없습니다.

12.wx.canvasToTemp파일경로

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

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；

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

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