149 lines
4.5 KiB
JavaScript
149 lines
4.5 KiB
JavaScript
/*
|
||
* @Description: 公共方法
|
||
* @Version: 1.0.0
|
||
* @Autor: hch
|
||
* @Date: 2021-07-22 00:01:09
|
||
*/
|
||
/**
|
||
* @description: 绘制正方形（可以定义圆角），并且有图片地址的话填充图片
|
||
* @param {CanvasContext} ctx canvas上下文
|
||
* @param {number} x 圆角矩形选区的左上角 x坐标
|
||
* @param {number} y 圆角矩形选区的左上角 y坐标
|
||
* @param {number} w 圆角矩形选区的宽度
|
||
* @param {number} h 圆角矩形选区的高度
|
||
* @param {number} r 圆角的半径
|
||
* @param {String} url 图片的url地址
|
||
*/
|
||
export function drawSquarePic(ctx, x, y, w, h, r, url) {
|
||
ctx.save()
|
||
ctx.beginPath()
|
||
// 绘制左上角圆弧
|
||
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
|
||
// 绘制border-top
|
||
// 画一条线 x终点、y终点
|
||
ctx.lineTo(x + w - r, y)
|
||
// 绘制右上角圆弧
|
||
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
|
||
// 绘制border-right
|
||
ctx.lineTo(x + w, y + h - r)
|
||
// 绘制右下角圆弧
|
||
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
|
||
// 绘制左下角圆弧
|
||
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
|
||
// 绘制border-left
|
||
ctx.lineTo(x, y + r)
|
||
// 填充颜色(需要可以自行修改)
|
||
ctx.setFillStyle('white')
|
||
ctx.fill()
|
||
// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
|
||
ctx.clip()
|
||
|
||
// 绘制图片
|
||
return new Promise((resolve, reject) => {
|
||
if (url) {
|
||
|
||
uni.getImageInfo({
|
||
src: url,
|
||
success(res) {
|
||
console.log("图片路径为11",url,res.path)
|
||
|
||
// #ifdef APP-PLUS
|
||
ctx.drawImage(url, x, y, w, h)
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
ctx.drawImage(res.path, x, y, w, h)
|
||
// #endif
|
||
ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
|
||
ctx.draw(true)
|
||
resolve()
|
||
},
|
||
fail(res) {
|
||
console.log('fail -> res', res)
|
||
uni.showToast({
|
||
title: '图片下载异常',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
ctx.draw(true)
|
||
resolve()
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* @description: 获取设备信息
|
||
* @param {type}
|
||
* @return {type}
|
||
* @author: hch
|
||
*/
|
||
export function getSystem() {
|
||
let system = uni.getSystemInfoSync()
|
||
let scale = system.windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
|
||
return { w: system.windowWidth, h: system.windowHeight, scale: scale }
|
||
}
|
||
|
||
/**
|
||
* @description: 绘制文本时文本的总体高度
|
||
* @param {Object} ctx canvas上下文
|
||
* @param {String} text 需要输入的文本
|
||
* @param {Number} x X轴起始位置
|
||
* @param {Number} y Y轴起始位置
|
||
* @param {Number} maxWidth 单行最大宽度
|
||
* @param {Number} fontSize 字体大小
|
||
* @param {String} color 字体颜色
|
||
* @param {Number} lineHeight 行高
|
||
* @param {String} textAlign 字体对齐方式
|
||
*/
|
||
export function drawTextReturnH(
|
||
ctx,
|
||
text,
|
||
x,
|
||
y,
|
||
maxWidth = 375,
|
||
fontSize = 14,
|
||
color = '#000',
|
||
lineHeight = 30,
|
||
textAlign = 'left'
|
||
) {
|
||
if (textAlign) {
|
||
ctx.setTextAlign(textAlign) //设置文本的水平对齐方式 ctx.setTextAlign这个可以兼容百度小程序 ，注意：ctx.textAlign百度小程序有问题
|
||
switch (textAlign) {
|
||
case 'center':
|
||
x = getSystem().w / 2
|
||
break
|
||
|
||
case 'right':
|
||
x = (getSystem().w - maxWidth) / 2 + maxWidth
|
||
break
|
||
|
||
default:
|
||
// 左对齐
|
||
x = (getSystem().w - maxWidth) / 2
|
||
break
|
||
}
|
||
}
|
||
let arrText = text.split('')
|
||
let line = ''
|
||
for (let n = 0; n < arrText.length; n++) {
|
||
let testLine = line + arrText[n]
|
||
ctx.font = fontSize + 'px sans-serif' //设置字体大小，注意：百度小程序 用ctx.setFontSize设置字体大小后，计算字体宽度会无效
|
||
ctx.setFillStyle(color) //设置字体颜色
|
||
let metrics = ctx.measureText(testLine) //measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
|
||
let testWidth = metrics.width
|
||
if (testWidth > maxWidth && n > 0) {
|
||
ctx.fillText(line, x, y)
|
||
line = arrText[n]
|
||
y += lineHeight
|
||
} else {
|
||
line = testLine
|
||
}
|
||
}
|
||
ctx.fillText(line, x, y)
|
||
ctx.draw(true) //本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。
|
||
return y
|
||
}
|