计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth(web端适用)
/*** 获取文本px宽度* @param font{String}: 字体样式**/
String.prototype.pxWidth = function(font) {
var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
context = canvas.getContext("2d");
font && (context.font = font);
var metrics = context.measureText(this);
return metrics.width;
}
计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth(小程序端适用)
componentDidMount(){
/*** 获取文本px宽度* @param font{String}: 字体样式**/
String.prototype.pxWidth = function(font) {
let metrics = {}
try {
let context = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = Taro.createCanvasContext('description'))
font && (context.font = font);
metrics = context.measureText(this);
} catch (e) {}
return metrics.width || 0;
}
}
render() {
return (
<View>
<Canvas canvasId='description' type='2d' style={
{position: 'fixed', top: '-100rpx', left: '0rpx', width: '750rpx', height: '100rpx'}}></Canvas>
</View>
)
}