小程序海报生成海报【vue】

文章目录

    • 1、创建海报的基本逻辑
    • 2、用canvas绘制文字
    • 3、绘制矩形
    • 4、绘制圆形
    • 5、绘制圆角矩形
    • 6、绘制图片
    • 7、执行绘制
    • 8、完整的代码

1、创建海报的基本逻辑

  • 1、先创建dom元素
    wrapperHeight是根据海报的内容计算出来海报的高度
    <view class="preview-card-wrap" @tap.stop><view class="poster-box" :class="{ show: isDrew }"><canvasid="myCanvas"canvas-id="myCanvas":style="{width: '750rpx',height: wrapperHeight + 'rpx',}"></canvas></view></view>
  • 2、创建海报类
class Poster {canvasId: string;instanceComponent: ReturnType<typeof getCurrentInstance> | undefined;ctx: UniApp.CanvasContext | undefined = undefined;width = 0;height = 0;isPixel: boolean;drawSteps: DrawSteps = [];constructor(canvasId: string,instance?: ReturnType<typeof getCurrentInstance>,{ isPixel = true } = <InitConfig>{}) {this.canvasId = canvasId;this.instanceComponent = instance;this.ctx = uni.createCanvasContext(canvasId, instance);this.isPixel = isPixel;}/*** 设置画布大小* @param width 画布宽度* @param height 画布高度*/public setCanvasSize(width: number, height: number) {this.width = width;this.height = height;}/*** 清空画布*/clearAll() {this.ctx?.clearRect(0,0,this.getPixel(this.width),this.getPixel(this.height));// clearRect() 方法只是将指定区域的像素设置为透明，但不会直接触发画布的重新绘制。// 因此，需要在清除画布后显式调用 draw() 方法，才能使清除的效果立即生效，即将空白画布展示在页面上。// 这个方法只是为了更新画布this.ctx?.draw();}
}export default Poster;
  • 3、创建海报类
import { getCurrentInstance, ref } from "vue";const poster = ref<Poster | undefined | any>(undefined);poster.value = new Poster("myCanvas", self, { isPixel: false });const self = getCurrentInstance();
// 设置画布大小
poster.value.setCanvasSize(750, wrapperHeight.value);
// 绘制前先清空画布
poster.value.clearAll();

2、用canvas绘制文字

  • 先将px和rpx进行转换
  /*** 获取大小* @param size*/getPixel(size: number) {return this.isPixel ? size : rpx2px(size);}
  • 获取文字的宽度
  /*** 获取文字宽度* @param text 文字* @param fontStyle 字体样式，同 css 的 font 属性* @returns {number} 文字宽度*/public getTextWidth(text: string, fontStyle?: string) {if (!this.ctx || !text.trim()) return 0;this.ctx.save();this.ctx.font = fontStyle || "14px sans-serif";const dimension = this.ctx.measureText(text);this.ctx.restore();return this.isPixel ? dimension.width : px2rpx(dimension.width);}
  • 给文字加上省略号
  // 给文字加上省略号public correctEllipsisText(text: string, width: number, fontStyle?: string) {let resultText = "";const strSplits = text.split("");while (strSplits.length > 0) {const s = strSplits.shift();const isGtWidth =this.getPixel(this.getTextWidth(resultText + s, fontStyle)) >this.getPixel(width);if (isGtWidth) {resultText = resultText.substring(0, resultText.length) + "...";break;}resultText += s;}return resultText;}
  • 绘制文字的逻辑
/*** 绘制文字* @param text 文字* @param x 横向绘制点* @param y 纵向绘制点* @param maxWidth 绘制区域最大宽度，文字宽度超过则换行* @param color 文字颜色* @param fontSize 文字大小* @param fontWeight 文字粗细* @param borderWidth 文字描边粗细* @param borderColor 文字描边样式* @param lineHeight 行高，即文字行与行之间的间距* @param UseEllipsis 当超出文字宽度是否使用省略号*/public async drawText({text,x,y,maxWidth,color,fontSize,fontFamily,fontWeight = 500,borderWidth,borderColor,lineHeight = 1.2,UseEllipsis = true,}: TextDrawStep) {if (!this.ctx) return;const fontStyle = `${fontWeight} ${fontSize ? this.getPixel(fontSize) : 14}px ${`${fontFamily}` || "sans-serif"}`;this.ctx.save();this.ctx.setTextBaseline("top");this.ctx.font = fontStyle;color && (this.ctx.fillStyle = color);if (borderColor) this.ctx.strokeStyle = borderColor;// 绘制文字边框样式if (borderWidth) {this.ctx.lineWidth = borderWidth;}if (UseEllipsis) {// 将超出canvas宽度的文字用...展示const drawText = this.correctEllipsisText(text,maxWidth || this.width,fontStyle);if (borderWidth) {this.ctx.strokeText(drawText,this.getPixel(x),this.getPixel(y),maxWidth ? this.getPixel(maxWidth) : maxWidth);}this.ctx.fillText(drawText,this.getPixel(x),this.getPixel(y),maxWidth ? this.getPixel(maxWidth) : maxWidth);} else {// 将文本分割成数组const words = text.split("");let line = ""; // 当前行的文字内容let yPos = y; // 当前行的纵坐标位置for (let i = 0; i < words.length; i++) {const testLine = line + words[i]; // 当前行加上当前单词// 测量当前行的宽度const textWidth = this.getTextWidth(testLine, fontStyle);// 如果当前行的宽度超过最大的宽度 需要换行if (textWidth > this.getPixel(maxWidth || this.width)) {// 讲当前行绘制到canvas上if (borderWidth) {this.ctx.strokeText(line,this.getPixel(x),this.getPixel(y),maxWidth ? this.getPixel(maxWidth) : maxWidth);this.ctx.fillText(line,this.getPixel(x),this.getPixel(yPos),maxWidth ? this.getPixel(maxWidth) : maxWidth);// 开始新一行yPos += lineHeight * (fontSize ? this.getPixel(fontSize) : 14);} else {line = testLine;}}}this.ctx.strokeText(line, this.getPixel(x), this.getPixel(y));this.ctx.fillText(line, this.getPixel(x), this.getPixel(yPos));}this.ctx.restore();}

3、绘制矩形

  /*** 绘制直边形状* @param lines 坐标数组第一个为设置落笔点，坐标数组最后一个如果和第一个一样可省略* @param fillColor 填充颜色*/public drawLineShape({ lines, fillColor }: LineShapeDrawStep) {if (!this.ctx || !lines.length) return;this.ctx.save();// 开始绘制路径this.ctx.beginPath();const [x, y] = lines[0];this.ctx.moveTo(this.getPixel(x), this.getPixel(y));// 遍历坐标数组，绘制直线段for (let i = 1; i < lines.length; i++) {const [ix, iy] = lines[i];this.ctx.lineTo(this.getPixel(ix), this.getPixel(iy));}if (this.ctx && fillColor) {this.ctx.fillStyle = fillColor;this.ctx.fill();} else {this.ctx.closePath();}this.ctx.restore();}

4、绘制圆形

  /*** 绘制圆形*/public drawCircleShape({x,y,radius,startAngle,endAngle,anticlockwise,fillColor,}: CircleShapeDrawStep) {if (!this.ctx) return;this.ctx.save();this.ctx.beginPath();this.ctx.arc(this.getPixel(x),this.getPixel(y),this.getPixel(radius),this.getPixel(startAngle),this.getPixel(endAngle),anticlockwise);if (this.ctx && fillColor) {this.ctx.setFillStyle(fillColor);this.ctx.fill();} else {this.ctx.closePath();}this.ctx.restore();}

5、绘制圆角矩形

  /*** 绘制圆角矩形* @param x x坐标* @param y y坐标* @param width 宽度* @param height 高度* @param radius 圆角半径* @param fillColor 填充颜色*/public roundRect = ({x,y,width,height,radius,fillColor,}: roundRectShapeDrawStep) => {if (!this.ctx) return;const dx = this.getPixel(x);const dy = this.getPixel(y);const dRadius = this.getPixel(radius);const dWidth = this.getPixel(width);const dHeight = this.getPixel(height);this.ctx.beginPath();this.ctx.moveTo(dx + dRadius, dy);// 下面三个点形成切线来画出圆弧this.ctx.lineTo(dx + dWidth - dRadius, dy);this.ctx.arcTo(dx + dWidth, dy, dx + dWidth, dy + dRadius, dRadius);this.ctx.lineTo(dx + dWidth, dy + dHeight - dRadius);this.ctx.arcTo(dx + dWidth,dy + dHeight,dx + dWidth - dRadius,dy + dHeight,dRadius);this.ctx.lineTo(dx + dRadius, dy + dHeight);this.ctx.arcTo(dx, dy + dHeight, dx, dy + dHeight - dRadius, dRadius);this.ctx.lineTo(dx, dy + dRadius);this.ctx.arcTo(dx, dy, dx + dRadius, dy, dRadius);this.ctx.closePath();this.ctx.fillStyle = fillColor;this.ctx.fill();};

6、绘制图片

  /*** 绘制图片* @param image 图片路径，必须为本地路径或临时路径* @param x 横向绘制点* @param y 纵向绘制点* @param width 绘制宽度* @param height 绘制高度* @param isCircle 是否为圆形图, 宽高需相等*/public async drawImage({image,x,y,width,height,isCircle = false,clipConfig,}: ImageDrawStep) {if (!this.ctx) return;this.ctx.save();if (isCircle) {const r = Math.floor(this.getPixel(width) / 2);// context.arc(x, y, radius, startAngle, endAngle, anticlockwise);this.ctx.arc(this.getPixel(x) + r,this.getPixel(y) + r,r,0,2 * Math.PI);// 只有在剪切路径范围内的内容才会被保留，超出剪切路径范围的部分会被裁剪掉。this.ctx.clip();}await sleep(50);let clipParams: number[] = [];if (clipConfig) {clipParams = [clipConfig.x,clipConfig.y,clipConfig.width,clipConfig.height,];}this.ctx.drawImage(image,...clipParams,this.getPixel(x),this.getPixel(y),this.getPixel(width),this.getPixel(height));// console.log(this.ctx, "查看图片的上下文");this.ctx.restore();}

7、执行绘制

 /*** 执行绘制*/async draw(callback?: Function) {// 初始化绘图步骤数组的索引let index = 0;// 循环遍历绘图步骤数组while (index < this.drawSteps.length) {// 从当前绘图步骤中提取出类型和其他属性const { type, ...otherProps } = <DrawStep>this.drawSteps[index];const stepProps = <AnyObject>otherProps;const props = <AnyObject>{};// 合并其他属性到 props 中Object.assign(props,stepProps.getProps? await stepProps.getProps(this.drawSteps, index): stepProps);// this.drawSteps[index].drawData = {//   ...props,//   ...(this.drawSteps[index].drawData || {}),// };// 根据类型执行相应的绘图操作if (type === DrawType.Text) {await this.drawText(<TextDrawStep>props);} else if (type === DrawType.Image) {await this.drawImage(<ImageDrawStep>props);} else if (type === DrawType.LineShape) {await this.drawLineShape(<LineShapeDrawStep>props);} else if (type === DrawType.CircleShape) {await this.drawCircleShape(<CircleShapeDrawStep>props);} else if (type === DrawType.RoundRectShape) {await this.roundRect(<roundRectShapeDrawStep>props);}// 如果当前绘图步骤需要立即绘制，则执行绘图同步操作props.immediateDraw && (await this.syncDraw());// 移动到下一个绘图步骤index += 1;}// 执行最终的绘图操作，并在绘制完成后执行回调函数this.ctx?.draw(true, (res) => {callback?.(res);});}

8、完整的代码

import type { getCurrentInstance } from "vue";
import { px2rpx, rpx2px } from "@/utils/view";
import type {DrawStep,DrawSteps,ImageDrawStep,InitConfig,LineShapeDrawStep,TextDrawStep,CircleShapeDrawStep,roundRectShapeDrawStep,
} from "./poster";
import { DrawType } from "./poster";
import { sleep } from "@/utils";class Poster {canvasId: string;instanceComponent: ReturnType<typeof getCurrentInstance> | undefined;ctx: UniApp.CanvasContext | undefined = undefined;width = 0;height = 0;isPixel: boolean;drawSteps: DrawSteps = [];constructor(canvasId: string,instance?: ReturnType<typeof getCurrentInstance>,{ isPixel = true } = <InitConfig>{}) {this.canvasId = canvasId;this.instanceComponent = instance;this.ctx = uni.createCanvasContext(canvasId, instance);this.isPixel = isPixel;}/*** 获取大小* @param size*/getPixel(size: number) {return this.isPixel ? size : rpx2px(size);}public getCanvasSize() {return {width: this.width,height: this.height,};}/*** 设置画布大小* @param width 画布宽度* @param height 画布高度*/public setCanvasSize(width: number, height: number) {this.width = width;this.height = height;}/*** 获取文字宽度* @param text 文字* @param fontStyle 字体样式，同 css 的 font 属性* @returns {number} 文字宽度*/public getTextWidth(text: string, fontStyle?: string) {if (!this.ctx || !text.trim()) return 0;this.ctx.save();this.ctx.font = fontStyle || "14px sans-serif";const dimension = this.ctx.measureText(text);this.ctx.restore();return this.isPixel ? dimension.width : px2rpx(dimension.width);}// 给文字加上省略号public correctEllipsisText(text: string, width: number, fontStyle?: string) {let resultText = "";const strSplits = text.split("");while (strSplits.length > 0) {const s = strSplits.shift();const isGtWidth =this.getPixel(this.getTextWidth(resultText + s, fontStyle)) >this.getPixel(width);if (isGtWidth) {resultText = resultText.substring(0, resultText.length) + "...";break;}resultText += s;}return resultText;}/*** 绘制图片* @param image 图片路径，必须为本地路径或临时路径* @param x 横向绘制点* @param y 纵向绘制点* @param width 绘制宽度* @param height 绘制高度* @param isCircle 是否为圆形图, 宽高需相等*/public async drawImage({image,x,y,width,height,isCircle = false,clipConfig,}: ImageDrawStep) {if (!this.ctx) return;this.ctx.save();if (isCircle) {const r = Math.floor(this.getPixel(width) / 2);// context.arc(x, y, radius, startAngle, endAngle, anticlockwise);this.ctx.arc(this.getPixel(x) + r,this.getPixel(y) + r,r,0,2 * Math.PI);// 只有在剪切路径范围内的内容才会被保留，超出剪切路径范围的部分会被裁剪掉。this.ctx.clip();}await sleep(50);let clipParams: number[] = [];if (clipConfig) {clipParams = [clipConfig.x,clipConfig.y,clipConfig.width,clipConfig.height,];}this.ctx.drawImage(image,...clipParams,this.getPixel(x),this.getPixel(y),this.getPixel(width),this.getPixel(height));// console.log(this.ctx, "查看图片的上下文");this.ctx.restore();}/*** 绘制文字* @param text 文字* @param x 横向绘制点* @param y 纵向绘制点* @param maxWidth 绘制区域最大宽度，文字宽度超过则换行* @param color 文字颜色* @param fontSize 文字大小* @param fontWeight 文字粗细* @param borderWidth 文字描边粗细* @param borderColor 文字描边样式* @param lineHeight 行高，即文字行与行之间的间距* @param UseEllipsis 当超出文字宽度是否使用省略号*/public async drawText({text,x,y,maxWidth,color,fontSize,fontFamily,fontWeight = 500,borderWidth,borderColor,lineHeight = 1.2,UseEllipsis = true,}: TextDrawStep) {if (!this.ctx) return;const fontStyle = `${fontWeight} ${fontSize ? this.getPixel(fontSize) : 14}px ${`${fontFamily}` || "sans-serif"}`;this.ctx.save();this.ctx.setTextBaseline("top");this.ctx.font = fontStyle;color && (this.ctx.fillStyle = color);if (borderColor) this.ctx.strokeStyle = borderColor;// 绘制文字边框样式if (borderWidth) {this.ctx.lineWidth = borderWidth;}if (UseEllipsis) {// 将超出canvas宽度的文字用...展示const drawText = this.correctEllipsisText(text,maxWidth || this.width,fontStyle);if (borderWidth) {this.ctx.strokeText(drawText,this.getPixel(x),this.getPixel(y),maxWidth ? this.getPixel(maxWidth) : maxWidth);}this.ctx.fillText(drawText,this.getPixel(x),this.getPixel(y),maxWidth ? this.getPixel(maxWidth) : maxWidth);} else {// 将文本分割成数组const words = text.split("");let line = ""; // 当前行的文字内容let yPos = y; // 当前行的纵坐标位置for (let i = 0; i < words.length; i++) {const testLine = line + words[i]; // 当前行加上当前单词// 测量当前行的宽度const textWidth = this.getTextWidth(testLine, fontStyle);// 如果当前行的宽度超过最大的宽度 需要换行if (textWidth > this.getPixel(maxWidth || this.width)) {// 讲当前行绘制到canvas上if (borderWidth) {this.ctx.strokeText(line,this.getPixel(x),this.getPixel(y),maxWidth ? this.getPixel(maxWidth) : maxWidth);this.ctx.fillText(line,this.getPixel(x),this.getPixel(yPos),maxWidth ? this.getPixel(maxWidth) : maxWidth);// 开始新一行yPos += lineHeight * (fontSize ? this.getPixel(fontSize) : 14);} else {line = testLine;}}}this.ctx.strokeText(line, this.getPixel(x), this.getPixel(y));this.ctx.fillText(line, this.getPixel(x), this.getPixel(yPos));}this.ctx.restore();}/*** 绘制直边形状* @param lines 坐标数组第一个为设置落笔点，坐标数组最后一个如果和第一个一样可省略* @param fillColor 填充颜色*/public drawLineShape({ lines, fillColor, gradients }: LineShapeDrawStep) {if (!this.ctx || !lines.length) return;this.ctx.save();this.ctx.beginPath();const [x, y] = lines[0];this.ctx.moveTo(this.getPixel(x), this.getPixel(y));for (let i = 1; i < lines.length; i++) {const [ix, iy] = lines[i];this.ctx.lineTo(this.getPixel(ix), this.getPixel(iy));}if (this.ctx && fillColor) {this.ctx.fillStyle = fillColor;this.ctx.fill();} else if (this.ctx && gradients?.length) {var lineargradient = this.ctx.createLinearGradient(gradients[0],gradients[1],gradients[2],gradients[3]);lineargradient.addColorStop(0, "#363636");lineargradient.addColorStop(1, "white");this.ctx.setFillStyle(lineargradient);this.ctx.fill();} else {this.ctx.closePath();}this.ctx.restore();}/*** 绘制圆形*/public drawCircleShape({x,y,radius,startAngle,endAngle,anticlockwise,fillColor,}: CircleShapeDrawStep) {if (!this.ctx) return;this.ctx.save();this.ctx.beginPath();this.ctx.arc(this.getPixel(x),this.getPixel(y),this.getPixel(radius),this.getPixel(startAngle),this.getPixel(endAngle),anticlockwise);if (this.ctx && fillColor) {this.ctx.setFillStyle(fillColor);this.ctx.fill();} else {this.ctx.closePath();}this.ctx.restore();}syncDraw(): Promise<void> {return new Promise((resolve) => {this.ctx?.draw(true, async () => {await sleep(30);resolve();});});}/*** 绘制圆角矩形* @param x x坐标* @param y y坐标* @param width 宽度* @param height 高度* @param radius 圆角半径* @param fillColor 填充颜色*/public roundRect = ({x,y,width,height,radius,fillColor,}: roundRectShapeDrawStep) => {if (!this.ctx) return;const dx = this.getPixel(x);const dy = this.getPixel(y);const dRadius = this.getPixel(radius);const dWidth = this.getPixel(width);const dHeight = this.getPixel(height);this.ctx.beginPath();this.ctx.moveTo(dx + dRadius, dy);// 下面三个点形成切线来画出圆弧this.ctx.lineTo(dx + dWidth - dRadius, dy);this.ctx.arcTo(dx + dWidth, dy, dx + dWidth, dy + dRadius, dRadius);this.ctx.lineTo(dx + dWidth, dy + dHeight - dRadius);this.ctx.arcTo(dx + dWidth,dy + dHeight,dx + dWidth - dRadius,dy + dHeight,dRadius);this.ctx.lineTo(dx + dRadius, dy + dHeight);this.ctx.arcTo(dx, dy + dHeight, dx, dy + dHeight - dRadius, dRadius);this.ctx.lineTo(dx, dy + dRadius);this.ctx.arcTo(dx, dy, dx + dRadius, dy, dRadius);this.ctx.closePath();this.ctx.fillStyle = fillColor;this.ctx.fill();};/*** 执行绘制*/async draw(callback?: Function) {// 初始化绘图步骤数组的索引let index = 0;// 循环遍历绘图步骤数组while (index < this.drawSteps.length) {// 从当前绘图步骤中提取出类型和其他属性const { type, ...otherProps } = <DrawStep>this.drawSteps[index];const stepProps = <AnyObject>otherProps;const props = <AnyObject>{};// 合并其他属性到 props 中Object.assign(props,stepProps.getProps? await stepProps.getProps(this.drawSteps, index): stepProps);// this.drawSteps[index].drawData = {//   ...props,//   ...(this.drawSteps[index].drawData || {}),// };// 根据类型执行相应的绘图操作if (type === DrawType.Text) {await this.drawText(<TextDrawStep>props);} else if (type === DrawType.Image) {await this.drawImage(<ImageDrawStep>props);} else if (type === DrawType.LineShape) {await this.drawLineShape(<LineShapeDrawStep>props);} else if (type === DrawType.CircleShape) {await this.drawCircleShape(<CircleShapeDrawStep>props);} else if (type === DrawType.RoundRectShape) {await this.roundRect(<roundRectShapeDrawStep>props);}// 如果当前绘图步骤需要立即绘制，则执行绘图同步操作props.immediateDraw && (await this.syncDraw());// 移动到下一个绘图步骤index += 1;}// 执行最终的绘图操作，并在绘制完成后执行回调函数this.ctx?.draw(true, (res) => {callback?.(res);});}/*** 将绘制内容转成图片* @returns {Promise<string>} 图片临时路径*/canvas2Image(): Promise<UniApp.CanvasToTempFilePathRes> | undefined {if (!this.ctx) return;return new Promise((resolve) => {uni.canvasToTempFilePath({canvasId: this.canvasId,x: 0,y: 0,width: this.width,height: this.height,success: resolve,},this.instanceComponent);});}/*** 清空画布*/clearAll() {this.ctx?.clearRect(0,0,this.getPixel(this.width),this.getPixel(this.height));// clearRect() 方法只是将指定区域的像素设置为透明，但不会直接触发画布的重新绘制。// 因此，需要在清除画布后显式调用 draw() 方法，才能使清除的效果立即生效，即将空白画布展示在页面上。// 这个方法只是为了更新画布this.ctx?.draw();}
}export default Poster;
export enum DrawType {Text = "text",Image = "image",LineShape = "lineShape",CircleShape = "circleShape",RoundRectShape = "roundRectShape",
}export interface InitConfig {isPixel: boolean;
}export type BaseDrawStep = {x: number;y: number;
};export type GetProps<O> = {getProps: (steps: DrawSteps, index: number) => O | Promise<O>;
};export type TextDrawStep = BaseDrawStep & {text: string;maxWidth?: number;color?: string;fontSize?: number;fontFamily?: string;fontWeight?: number;borderWidth?: number;borderColor?: string;lineHeight?: number;UseEllipsis?: boolean;
};export type ImageDrawStep = BaseDrawStep & {image: string;width: number;height: number;isCircle?: boolean;clipConfig?: {x: number;y: number;width: number;height: number;};
};export type LineShapeDrawStep = {lines: Array<[number, number]>;fillColor?: string;strokeStyle?: string;gradients?: Array<number>;
};
export type CircleShapeDrawStep = {x: number;y: number;radius: number;startAngle: number;endAngle: number;anticlockwise: boolean;fillColor?: string;
};export type roundRectShapeDrawStep = {ctx: CanvasRenderingContext2D;x: number;y: number;width: number;height: number;radius: number;fillColor: any;
};export type DrawStep =| ({ type: DrawType.Text } & (TextDrawStep | GetProps<TextDrawStep>))| ({ type: DrawType.Image } & (ImageDrawStep | GetProps<ImageDrawStep>))| ({ type: DrawType.LineShape } & (| LineShapeDrawStep| GetProps<LineShapeDrawStep>));export type DrawSteps = Array<DrawStep & { drawData?: AnyObject; immediateDraw?: boolean }
>;
export const px2rpx = (px: number) => px / (uni.upx2px(100) / 100);
export const rpx2px = (rpx: number) => uni.upx2px(rpx);
  • 使用

import { getCurrentInstance, ref } from "vue";const poster = ref<Poster | undefined | any>(undefined);poster.value = new Poster("myCanvas", self, { isPixel: false });const self = getCurrentInstance();
// 设置画布大小
poster.value.setCanvasSize(750, wrapperHeight.value);
// 绘制前先清空画布
poster.value.clearAll();
poster.value.drawSteps = [{// 背景高斯模糊图片type: DrawType.Image,getProps: (steps: DrawSteps) => {return {image: flurBg.path,x: 0,y: 0,width: 750,height: 308,};},},  
];await poster.value.draw((res: any) => {uni.hideLoading();});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/719432.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

支持向量机 SVM | 线性可分：硬间隔模型公式推导

支持向量机 SVM | 线性可分：硬间隔模型公式推导

目录 一. SVM的优越性二. SVM算法推导小节概念 在开始讲述SVM算法之前&#xff0c;我们先来看一段定义&#xff1a; 支持向量机(Support VecorMachine, SVM)本身是一个二元分类算法&#xff0c;支持线性分类和非线性分类的分类应用&#xff0c;同时通过OvR或者OvO的方式可以应用…
阅读更多...
长贵对赵本山说：你需要我们家大脚，我立马给你配双大鞋！

长贵对赵本山说：你需要我们家大脚，我立马给你配双大鞋！

长贵对赵本山说&#xff1a;你需要我们家大脚&#xff0c;我立马给你配双大鞋&#xff01; --小品《乡村爱情》&#xff08;中2&#xff09;的台词 表演者&#xff1a;赵本山 于月仙 王小利 唐鉴军等 &#xff08;接上&#xff09; 哈哈哈 伊拉克啊 这地方也不产这玩意吧 …
阅读更多...
Chat GPT：AI聊天机器人的革命性突破！

Chat GPT：AI聊天机器人的革命性突破！

一、引言 近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术的发展日新月异&#xff0c;其中最具代表性的成果之一便是Chat GPT。这款基于自然语言处理&#xff08;NLP&#xff09;技术的聊天机器人&#xff0c;以其高度智能、灵活多变的特点&#xff0c;迅速吸引了全…
阅读更多...
笔记74：在SLAM建图过程中，为什么要使用【障碍物点云配准算法】和【里程计估算算法】结合的方法

笔记74：在SLAM建图过程中，为什么要使用【障碍物点云配准算法】和【里程计估算算法】结合的方法

仅使用【障碍物点云配准算法】&#xff0c;很容易导致在一条长通道中&#xff0c;因为前后两帧的雷达点云图过于相似&#xff0c;导致特征匹配一直完全重合&#xff0c;使得机器人建图一直停留在原地&#xff0c;但实体机器人早就沿着通道跑向远端了&#xff1b; 使用Hector_ma…
阅读更多...
（学习日记）2024.03.02：UCOSIII第四节：创建任务

（学习日记）2024.03.02：UCOSIII第四节：创建任务

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…
阅读更多...
js 精确计算（解决js四则运算精度缺失问题）

js 精确计算（解决js四则运算精度缺失问题）

js的小数的运算&#xff0c;可能会得到一个不精确的结果&#xff0c;因为所有的运算都要转换成二进制去计算&#xff0c;然而&#xff0c;二进制无法精确表示1/10。 var a 0.1 0.2; console.log(a); //打印结果&#xff1a;0.30000000000000004因此需要使用以下方法实现精确…
阅读更多...
这是开玩笑吗？加个工具，WPS与Excel表格变成了应用系统

这是开玩笑吗？加个工具，WPS与Excel表格变成了应用系统

表格处理数据简单快捷&#xff0c;是个人用户的首选。然而&#xff0c;当企业长期使用&#xff0c;成本表、客户表、销售表等堆积如山&#xff0c;寻找所需表格如同大海捞针&#xff0c;稍有不慎便可能导致数据丢失、混乱。即便使用WPS和Excel这样的表格软件&#xff0c;处理大…
阅读更多...
代码随想录算法训练营第三十六天 | LeeCode 435. 无重叠区间 ，763.划分字母区间 ， 56. 合并区间

代码随想录算法训练营第三十六天 | LeeCode 435. 无重叠区间 ，763.划分字母区间 ， 56. 合并区间

435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; class Solution { private:static bool cmp(const vector<int> &a,const vector<int> &b){if(a[0]b[0]) return a[1]<b[1];return a[0]<b[0];} public:int eraseOverlapIntervals(vector&l…
阅读更多...
C#进阶高级语法之LINQ：查询操作的便利性与效率提升

C#进阶高级语法之LINQ：查询操作的便利性与效率提升

引言&#xff1a; 在C#编程中&#xff0c;LINQ&#xff08;Language-Integrated Query&#xff09;是一种强大的查询语言&#xff0c;它被集成在.NET框架中&#xff0c;允许开发者对各种数据源进行查询和操作。LINQ的出现&#xff0c;极大地提升了C#在数据处理方面的能力&#…
阅读更多...
回溯难题（算法村第十八关黄金挑战）

回溯难题（算法村第十八关黄金挑战）

复原 IP 地址 93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 &q…
阅读更多...
IDEA中使用git提交代码时，有.class文件怎么避免

IDEA中使用git提交代码时，有.class文件怎么避免

在IDEA中使用git提交代码时&#xff0c;git把.class文件都给我放进来了&#xff0c;而我并不想要提交.class文件 我要提交的是.java文件 应该怎么设置呢 解决方案&#xff0c;点击整个项目的生命周期中的clean之前&#xff0c;你会发现git提交栏的.class文件都不见了。
阅读更多...
常用LDO型号

常用LDO型号

常用LDO型号 常用LDO型号-国产&进口 常用的LDO&#xff08;低压差线性稳压器&#xff09;型号有以下这些&#xff1a; LM2937及LM2937-N&#xff1a;这两款是TI&#xff08;德州仪器&#xff09;的产品&#xff0c;其中LM2937-N为低噪声版本&#xff0c;适用于对噪声敏感…
阅读更多...
vue是如何监听对象和数组变化的

vue是如何监听对象和数组变化的

Vue框架通过其响应式系统来监听对象和数组的变化。这个系统的核心在于追踪依赖关系&#xff0c;并在数据变化时通知所有依赖于该数据的观察者。 1. 对象监听 Vue使用Object.defineProperty方法来劫持各个属性的getter和setter。当组件中的数据被读取时&#xff0c;会触发gette…
阅读更多...
ROS2服务通信的实现

ROS2服务通信的实现

文章目录 1.服务通信的概念及应用场景1.1概念1.2 应用场景 2.准备工作3.服务通信的实现3.1 服务通信接口消息3.2 服务端实现3.3 客户端实现3.4 编译及运行3.4.1 修改CMakeLists3.4.2 服务端运行结果3.4.2 客户端运行结果 1.服务通信的概念及应用场景 1.1概念 服务通信也是ROS…
阅读更多...
抖店0元入驻不交钱会怎么样？个人店和个体店的利弊分析，开店必看

抖店0元入驻不交钱会怎么样？个人店和个体店的利弊分析，开店必看

我是王路飞。 现在的抖店是可以开通个人店的。 也就是不需要营业执照、直接使用个人身份证就可以在抖音开店&#xff0c;而且也不需要缴纳店铺保证金就能开店运营了。 但真实情况是怎么样的呢&#xff1f;新手0元入驻抖店不交这个保证金会怎么样呢&#xff1f; 今天给想在抖…
阅读更多...
AI大预言模型——ChatGPT在地学、GIS、气象、农业、生态、环境应用

AI大预言模型——ChatGPT在地学、GIS、气象、农业、生态、环境应用

原文链接&#xff1a;AI大预言模型——ChatGPT在地学、GIS、气象、农业、生态、环境应用 一开启大模型 1 开启大模型 1)大模型的发展历程与最新功能 2)大模型的强大功能与应用场景 3)国内外经典大模型&#xff08;ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diff…
阅读更多...
ios App 发送广播失败解决

ios App 发送广播失败解决

记录开发 ios App 使用 c 混编时遇到的问题&#xff1a; 开发环境 macOS Sonoma&#xff08;最新版本14.3.1&#xff09; Xcode Version 15.2 ipadOS&#xff08;最新版本17.3.1&#xff09; 问题&#xff1a;在mac 上 和 ipad上测试&#xff0c;当 udp 发送广播&#xff…
阅读更多...
跨域引起的两个接口的session_id不是同一个

跨域引起的两个接口的session_id不是同一个

来源场景&#xff1a; RequestMapping(“/captcha”)接口设置了SESSION_KEY&#xff0c;也能获取到&#xff0c;但是到了PostMapping(“/login”)接口就是空的&#xff0c;由于跨域导致的两个session_id不是同一个 /*** 系统用户 前端控制器*/ Controller CrossOrigin(origins…
阅读更多...
【数据结构和算法初阶(C语言)】双向循环带头链表的增删查改详解（天才设计的链表结构，应用简单逆天！！！！！）

【数据结构和算法初阶(C语言)】双向循环带头链表的增删查改详解（天才设计的链表结构，应用简单逆天！！！！！）

目录 ​编辑​编辑 1.双向链表的定义&#xff1a;前赴后继 2.带头链表的定义-----哨兵位 3.增删查改 3.1创建新节点函数----方便后续增加节点调用 3.2创建哨兵位----创建头结点 3.3增加节点&#xff0c;尾部插入数据 3.4尾删除 3.5查找函数----遍历对比&#xff…
阅读更多...
AcWing 562.壁画

AcWing 562.壁画

咱先看一眼算法标签&#xff0c;发现是思维题、枚举、前缀和 Buttt其实我们根据上诉的样例解释部分就会发现&#xff0c;其实这就是一个长度为⌈n/2⌉&#xff08;向上取整哦&#xff09;的连续子数组的最大和。 这题我也用暴力法试过啦&#xff0c;很明显会TLE 如果你对dp题…
阅读更多...
最新文章

Copyright @ 2022~2023