소규모 프로그램 개발에서 wxcanvas에 대한 자세한 설명

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

canvas WeChat 미니 프로그램의 non-h5 canvas는 많은 차이점이 있습니다. 다음은 WeChat 미니 프로그램입니다. 프로그램의 캔버스는 wxcanvas입니다

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

1.wxcanvas는 h5canvas와 달리 너비가 있습니다. 및 height 속성 및 너비와 높이 스타일. 상자로 이해될 수 있는 스타일만 있습니다.

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 시 context.drawImage 를 그릴 수 있습니다. 휴대폰에서는 그릴 수 없지만 컴퓨터 개발 도구에서는 그릴 수 없습니다

12.wx.canvasToTempFilePath

공식 문서에는 한 줄만 있는데 알고 보니

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

【관련 추천】

1. WeChat 미니 프로그램에 대한 생각 공유

2.html5 캔버스 및 샘플 코드 사용 JavaScript로 그리기 프로그램 만들기

3.

프론트엔드와 위챗 미니 프로그램의 미래와 발전

미니 옵션 프로그램 개발 간단한 카드 구현 예시

위 내용은 소규모 프로그램 개발에서 wxcanvas에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!