čŞéĺş canvas 澡ćĽçć wxss çĺ樥ĺ
wxapp-canvas
đ¨ 垎俥ĺ°ç¨ĺşĺżŤéçťçťĺˇĽĺ ˇ
çŽäť
饚çŽä˝żç¨ć ˇĺźčĄ¨ćĽçťĺś canvasďźĺŠç¨ wxss ä¸ rpx ĺä˝ĺŽç°éé ďźć˘č˝äżčŻĺźĺćçďźĺćśäšć˛ĄćĺŚäš ććŹă
çťäťśĺŽç°äş css ĺşćŹçĺ樥ĺďźćśľç厽éŤăčćŻăĺä˝ăčžšćĄăĺ čžščˇçďźćŻć čŞéĺşĺŽ˝éŤăććŹć˘čĄăĺč§čžšćĄăčćŻć¸ĺăčćŻéĺ¤ ç弽çŠĺč˝ďźćĺ ´čśŁçĺŻäťĽäşč§Łä¸ă
çťĺśäťŁç 沥ćä¸çťäťść˝çŚťďźćĺ ´čśŁçĺĺŚĺŻäťĽčŻčŻć˝çŚťĺťéé ĺ¤çťçŤŻçŠçŠă
注ćďźéĄšçŽä˝żç¨
canvasContext.measureText
ănodesRef.fields[computedStyle]
çďźčŻˇäżćĺşçĄĺş >= 2.1.0
忍éĺźĺ§
使ç¨äšĺ
ĺ¨ĺźĺ§ä˝żç¨ wxapp-canvas äšĺďźčŻˇé 话 垎俥ĺ°ç¨ĺşčŞĺŽäšçťäťś çç¸ĺ łć楣ă
ĺŚä˝ä˝żç¨
䝼ĺçĺ°ç¨ĺşä¸şäžďź
ĺŽčŁ npm äžčľă
npm install --save wxapp-canvas
ćçĺ°äžčľä¸ç
dist
çŽĺ˝ä¸çćäťśćˇč´ĺ°čŞĺˇąç饚çŽä¸ďźĺťşčŽŽćžç˝Žĺ¨packages/wxapp-canvas
çŽĺ˝ä¸ďźçťäťśčˇŻĺžć šćŽčŞĺˇąéĄšçŽä˝ç˝Žé 罎ăââpackages â ââwxapp-canvas â ââbabel-runtime â â ââhelpers â ââbehaviors â â ââelement â ââcomponents â ââwxapp-canvas â ââwxapp-canvas-div ââpages ââindex
桝ĺ 饾é˘ç json é 罎ďźćĺ¨ćˇč´ćäťśćśčŻˇćł¨ćĺźç¨čˇŻĺžďź
"usingComponents": { "wxapp-canvas": "wxapp-canvas/components/wxapp-canvas/index", "wxapp-canvas-div": "wxapp-canvas/components/wxapp-canvas-div/index" }
ĺ¨ wxml ä¸ä˝żç¨çťäťś
<wxapp-canvas id="wxapp-canvas" class-name="m-wxapp-canvas"> <wxapp-canvas-div class-name="m-wxapp-canvas-div" csstext="content: 'čżćŻčçšçĺ 厚'; background-color: red;"></wxapp-canvas-div> </wxapp-canvas>
- wxapp-canvasďź
class-name
: ĺ¤é¨ć ˇĺźçąťďźç¨ćĽäťŁćżclass
preload
: é 罎ćŻĺŚé˘ĺ č˝˝čľćş
- wxapp-canvas-div:
class-name
: ĺ¤é¨ć ˇĺźçąťďźç¨ćĽäťŁćżclass
csstext
: ĺ¤é¨ć ˇĺźďźç¨ćĽäťŁćżstyle
- wxapp-canvasďź
ĺ¨ wxss ä¸çźĺç¸ĺşć ˇĺź
.m-wxapp-canvas { width: 100vw; height: 50vh; } .m-wxapp-canvas-div { position: absolute; bottom: 20rpx; right: 20rpx; width: 50%; height: 50%; border: 10rpx solid; border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: yellow; }
ä¸ć ĺć ˇĺźĺąĺ 襨ä¸č´ďźćŻćĺşćŹçĺ樥ĺďźĺ ćŹďź
- dimension: ćŻć厽éŤčŞéĺşăć大ćĺ°ĺŽ˝éŤ
- borderďźćŻćĺşćŹčžšćĄăĺč§ăé´ĺ˝ą
- backgroundďźćŻćčćŻé˘č˛ăĺžçăçşżć§ć¸ĺărepeată大ĺ°
- colorďźĺ źĺŽšć ĺć ˇĺźčĄ¨
- fontďźĺ źĺŽšć ĺć ˇĺźčĄ¨
- paddingďźĺ źĺŽšć ĺć ˇĺźčĄ¨
- positioningďźćŻć topăleftăbottomărightăz-index
text: ćŻć text-alignăvertical-align ç¨äşčçšĺ 厚ä˝ç˝Žçč°č
ä¸ć ĺĺ樥ĺä¸ä¸č´çćďź
position äť ćŻć
absolute
- ä¸ćŻć display
- ä¸ćŻćĺľĺĽčçš
- ĺ¨ćé´ĺ˝ąĺčžšćĄçć ĺľďźčćŻĺ°ć ćłĺŽç°éć
- ć¸ĺčćŻčŻˇäťĽ
linear-gradient(<č§ĺşŚ>, [<é˘č˛> <ä˝ç˝Ž>])
çć ĺćšĺźäšŚĺďźĺŚďźlinear-gradient(30deg, #fff 0%, #000 100%)
ĺ¨ js ä¸ć§čĄć¸˛ć
Page({ myMethod() { wx.showLoading({ title: 'çťĺśä¸' }); const canvas = this.selectComponent('#wxapp-canvas'); canvas .draw() .then(() => { wx.hideLoading(); // ć§čĄčŞĺŽäšćä˝ďźĺŚäżĺ为ĺžç canvas.getContext().anvasToTempFilePath(...) }); } });
çťäťśĺŻšĺ¤ć´é˛äťĽä¸ćšćłďź
draw
ďźçťĺśé˘ćż- @return {Promise}
getContext
ďźĺŻźĺşçťćżä¸ä¸ć- @return {Object} canvas ä¸ä¸ć
adaptationText
ďźéé ććŹ- @param {String} str éčŚéé çććŹ
- @param {Object} font ććŹć ˇĺź
- @param {Number} maxWidth ć大厚ĺ¨ĺŽ˝ĺşŚ
- @return {Array} ĺ掾弽çććŹ
čŞĺŽäšćŠĺą
wxapp-canvas ĺ 莸ç¨ćˇćŠĺąčŞĺŽäšć¸˛ćčçšă
ä¸ä¸Şć ĺ
ä¸ä¸ŞĺşćŹçčŞĺŽäšć¸˛ćčçšçťćĺŚä¸ďź
wxml ĺ 厚
<!-- čŞĺŽäščçšéčŚčŽžç˝Žä¸ä¸ŞçŠş view --> <view id="canvas-element" class="class-name" style="display: none;"></view>
js čćŹĺ 厚
import { behaviors } from 'wxapp-canvas/index.js'; Component({ externalClasses: ['class-name'], behaviors: [ behaviors.element ], relations: { 'element': { type: 'ancestor', target: behaviors.wxappCanvasBehavior, linked(target) { this.$canvas = target; } } }, methods: { /** * ç¨äşčŞĺŽäšć¸˛ćĺ 厚 */ render(ctx) { // do some thing }, /** * ç¨äşé˘ĺ č˝˝čľćş * * @return {Promise} */ preload(rect, utils) { return this._preload(rect, utils) .then(() => { // do some thing }); } } });
ć ĺ说ć
çťäťśćäž behaviors.element
ĺ behaviors.wxappCanvasBehavior
两个 behaviorďźä¸ä¸ŞäťŁčĄ¨čçšä¸ä¸ŞäťŁčĄ¨ĺŽšĺ¨ďźäťťä˝čŞĺŽäščçšĺéĺä¸ćäžĺä¸ć ˇéć behaviorsă
čŞĺŽäšçťäťśčżéé 罎ĺ¤é¨ć ˇĺźçąťďźäťĽäżčŻĺŻšĺ¤č§ć źççťä¸ă
čŞĺŽäšçťäťść两个ĺż
éçćšćłďźrender
ĺ preload
ďź
render
ďźćĽćś canvas ä¸ä¸ćďźć§čĄčŞĺŽäšçťçťĺ¨ä˝preload
: čľćşé˘ĺ č˝˝ďźćĽćśĺŽšĺ¨boundingClientRect
ĺéé ĺˇĽĺ ˇčćŹďźčŻĽćšćłĺż 饝č°ç¨_preload
解ćć ˇĺźćšćłĺčżĺ Promise ĺ˝ć°ă
é˘č§çťäťś
clone 饚çŽďźĺŽčŁ 䝼ćĽďźç¨ĺžŽäżĄĺźĺč ĺˇĽĺ ˇćĺźéĄšçŽä¸ç exampleďźćł¨ććżć˘éĄšçŽç appidďźďź
# clone 饚çŽ
git clone https://github.com/Mrminfive/wxapp-canvas.git
# ĺŽčŁ
äžčľ
cd wxapp-canvas && npm install
# çźčŻçťäťś
npm run dev
License
Copyright (c) 2018 minfive