技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. ノードを取得する
wx.createSelectorQuery()
wx.createSelectorQuery().in(this) //in(this)をコンポーネントに追加します。そうでないと取得されません

2.使用例

wx.createSelectorQuery().in(this)
      .select('#share')
      .fields({
        node: true,
        size: true
      })
      .exec(async (res) => {
      		const canvas = res[0].node;
        // Canvas 绘制上下文
        const ctx = canvas.getContext('2d');

      //  let dpr = this.data.dpr
        //画布大小根据屏幕分辨率进行缩放，防止模糊
        const renderWidth = res[0].width
        const renderHeight = res[0].height


        // 初始化画布大熊啊
       //  const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = renderWidth*ratio
        canvas.height = renderHeight*ratio
        ctx.scale(ratio, ratio)
        //画布背景色
        ctx.fillStyle="#ffffff"
        ctx.fillRect(0,0,canvas.width, canvas.height)
        //画图片
        const image = canvas.createImage()
        image.crossOrigin = "Anonymous" // 亚跨域使用
        image.src = imageCover
        image.onload = ()=>{
        	//计算裁剪图片
          // const imageWidth = image.width
          // const imageHeight = image.height
          // const cropRatio = 3/4
          // const cropWidth = imageWidth * cropRatio
          // const cropHeight = imageHeight
          // 计算裁剪的起始位置，这里以居中为例
          // const startX = (imageWidth - cropWidth) / 2
          // const startY = (imageHeight - cropHeight) / 2
          // ctx.drawImage(image, startX, startY, cropWidth, cropHeight, 0, 0, 300, 400)
          ctx.drawImage(image, 0, 0, 300, 400);
        }
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

塗りつぶしテキストスタイル

 ctx.font= '600 12px PingFang TC'
 ctx.fillStyle = '#ffffff'
 ctx.fillText('你好',231,362)
1
2
3

塗りつぶしテキストの境界線のスタイル

 ctx.font= '600 12px PingFang TC'
 ctx.fillStyle = '#ffffff'
 ctx.strokeStyle = "#000000";
 ctx.fillText('你好',231,362)
 ctx.strokeText('你好',231,362);
1
2
3
4
5

テキスト幅を計算する
var メトリック = c

ctx.measureText(testLine).width;
1

3.CSSテキストストローク：
-webkit-text-ストローク: 1px 赤; テキストがどんどん細くなり、テキスト自体の幅が占有され、黒のフォント スタイルが縮小されます。

使える
データに textValue を設定します: 'Happy'

<view class="title-greet" data-color="#0C20E9" data-attr-greet="{{textValue}}">{{textValue}}</view>
.title-greet{
  -webkit-text-stroke-width: 4px;  
  -webkit-text-stroke-color: #fff; 
  -webkit-text-stroke: 4px #fff; 
  position: relative;
  z-index: 1;
}
.title-greet:after {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  -webkit-text-stroke-width: 0px;
  content: attr(data-attr-greet);
  color: attr(data-color);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18