欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 创投人物 > 小程序问题

小程序问题

2024/10/24 4:42:37 来源:https://blog.csdn.net/u013195452/article/details/140354526  浏览:    关键词:小程序问题

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].widthconst renderHeight = res[0].height// 初始化画布大熊啊//  const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = renderWidth*ratiocanvas.height = renderHeight*ratioctx.scale(ratio, ratio)//画布背景色ctx.fillStyle="#ffffff"ctx.fillRect(0,0,canvas.width, canvas.height)//画图片const image = canvas.createImage()image.crossOrigin = "Anonymous" // 亚跨域使用image.src = imageCoverimage.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);}})

填充文字样式

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

填充文字边框样式

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

计算文字宽度
var metrics = c

ctx.measureText(testLine).width;

3.css文字描边:
-webkit-text-stroke: 1px red; 会使文字越来越瘦,占文字本身的宽度,黑色字体样式会减少在这里插入图片描述

可以使用
data里面设置 textValue: ‘愉快’
在这里插入图片描述

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

判断方法兼容问题 :

wx.canIUse()

例如 判断wx.reportEvent(‘’)方法基础库支不支持

wx.canIUse('reportEvent')

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com