Κοινή χρήση τεχνολογίας

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

1. Λάβετε κόμβους
wx.createSelectorQuery()
wx.createSelectorQuery().in(this) //Add 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 metrics = γ

ctx.measureText(testLine).width;
1

3.css διαδρομή κειμένου:
-webkit-text-stroke: 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