기술나눔

한어Русский язык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

텍스트 너비 계산
변수 메트릭 = c

ctx.measureText(testLine).width;
1

3.css 텍스트 스트로크:
-webkit-text-Stroke: 1px red; 텍스트를 점점 더 가늘게 만들어 텍스트 자체의 너비를 차지하고 검정색 글꼴 스타일이 줄어듭니다.

사용할 수 있다
데이터에 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