怎么注册一个公司网站网站建设主流技术

怎么注册一个公司网站,网站建设主流技术,广州建设银行保安招聘网站,cdr做网站流程图形渲染是提升应用交互体验的核心技能#xff0c;而 Canvas 组件作为鸿蒙图形渲染的基础载体#xff0c;能实现从简单绘图到复杂自定义组件的各类需求。掌握 Canvas 绘图逻辑与自定义组件开发#xff0c;能让你的应用在视觉呈现和功能扩展性上更上一层楼。本文将从 Canvas …图形渲染是提升应用交互体验的核心技能而 Canvas 组件作为鸿蒙图形渲染的基础载体能实现从简单绘图到复杂自定义组件的各类需求。掌握 Canvas 绘图逻辑与自定义组件开发能让你的应用在视觉呈现和功能扩展性上更上一层楼。本文将从 Canvas 基础绘图入手逐步过渡到自定义组件开发最终实现实用的「手写签名组件」。一、核心认知Canvas 与自定义组件的应用价值1. 应用场景自定义可视化组件如签名板、绘图工具、进度条数据可视化图表如折线图、饼图的底层绘制交互型图形如手写输入、涂鸦功能个性化 UI 元素如不规则按钮、动态图形效果2. 核心技术栈基础组件Canvas绘图容器、CanvasRenderingContext2D绘图上下文自定义组件继承Component并重写onDraw方法关键能力路径绘制、样式设置、事件监听、图片导出二、Canvas 组件基础四大核心绘图能力Canvas 绘图的核心是通过CanvasRenderingContext2D上下文对象操作以下是线条、矩形、圆形、文字的基础绘制逻辑代码可直接复用1. 初始化 Canvas 上下文import { Canvas, CanvasRenderingContext2D } from ohos.ui.canvas; Component struct CanvasBasicDemo { private canvasContext: CanvasRenderingContext2D | null null; // 初始化上下文 private initContext(canvas: Canvas) { this.canvasContext canvas.getContext(2d); if (!this.canvasContext) { console.error(Canvas 上下文初始化失败); } } build() { Canvas(this.initContext.bind(this)) .width(100%) .height(400) .backgroundColor(#f5f5f5) } }2. 绘制线条手写签名基础// 绘制连续线条 private drawLine(startX: number, startY: number, endX: number, endY: number) { if (!this.canvasContext) return; const ctx this.canvasContext; // 设置线条样式 ctx.beginPath(); // 开始新路径 ctx.moveTo(startX, startY); // 起点 ctx.lineTo(endX, endY); // 终点 ctx.strokeStyle #2f54eb; // 线条颜色 ctx.lineWidth 3; // 线条宽度 ctx.lineCap round; // 线条端点圆角 ctx.lineJoin round; // 线条交点圆角 ctx.stroke(); // 执行绘制 }3. 绘制矩形与圆形// 绘制矩形填充描边 private drawRect(x: number, y: number, width: number, height: number) { if (!this.canvasContext) return; const ctx this.canvasContext; ctx.fillStyle rgba(47, 84, 235, 0.2); // 填充颜色半透明 ctx.fillRect(x, y, width, height); // 填充矩形 ctx.strokeStyle #2f54eb; ctx.lineWidth 2; ctx.strokeRect(x, y, width, height); // 描边矩形 } // 绘制圆形填充描边 private drawCircle(x: number, y: number, radius: number) { if (!this.canvasContext) return; const ctx this.canvasContext; ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); // 圆心(x,y)半径radius0到360度 ctx.fillStyle rgba(255, 77, 79, 0.2); ctx.fill(); ctx.strokeStyle #ff4d4f; ctx.lineWidth 2; ctx.stroke(); }4. 绘制文字private drawText(text: string, x: number, y: number) { if (!this.canvasContext) return; const ctx this.canvasContext; ctx.font 20px sans-serif; // 字体大小字体族 ctx.fillStyle #333333; // 文字颜色 ctx.textAlign center; // 水平居中 ctx.textBaseline middle; // 垂直居中 ctx.fillText(text, x, y); // 绘制文字 }三、自定义组件开发重写 onDraw 与事件响应自定义组件是在 Canvas 基础上封装独立功能模块核心是重写onDraw方法实现绘图逻辑并绑定触摸事件实现交互1. 自定义组件基础结构import { Component, Canvas, CanvasRenderingContext2D, TouchEvent } from ohos.ui.canvas; // 自定义手写签名组件 Component export struct SignaturePad extends Component { // 组件属性外部可配置 private lineWidth: number 3; private lineColor: string #2f54eb; private bgColor: string #ffffff; // 内部状态 private ctx: CanvasRenderingContext2D | null null; private isDrawing: boolean false; private lastX: number 0; private lastY: number 0; // 重写onDraw方法组件绘制入口 override onDraw(canvas: Canvas) { this.ctx canvas.getContext(2d); if (!this.ctx) return; // 绘制背景 const { width, height } canvas.getBoundingClientRect(); this.ctx.fillStyle this.bgColor; this.ctx.fillRect(0, 0, width, height); } // 触摸事件响应核心交互 private handleTouchStart(e: TouchEvent) { this.isDrawing true; // 获取触摸起始坐标 const { x, y } e.touches[0]; this.lastX x; this.lastY y; } private handleTouchMove(e: TouchEvent) { if (!this.isDrawing || !this.ctx) return; const { x, y } e.touches[0]; // 绘制当前线段从上次坐标到当前坐标 this.ctx.beginPath(); this.ctx.moveTo(this.lastX, this.lastY); this.ctx.lineTo(x, y); this.ctx.strokeStyle this.lineColor; this.ctx.lineWidth this.lineWidth; this.ctx.lineCap round; this.ctx.lineJoin round; this.ctx.stroke(); // 更新上次坐标 this.lastX x; this.lastY y; } private handleTouchEnd() { this.isDrawing false; } build() { Canvas(this.onDraw.bind(this)) .width(100%) .height(300) .onTouchStart(this.handleTouchStart.bind(this)) .onTouchMove(this.handleTouchMove.bind(this)) .onTouchEnd(this.handleTouchEnd.bind(this)) } }2. 扩展功能笔触配置与图片保存给自定义组件添加笔触粗细切换、颜色选择、清空、保存图片功能// 续上SignaturePad组件代码 export struct SignaturePad extends Component { // 新增属性与状态 Link lineWidth: number; // 双向绑定外部粗细配置 Link lineColor: string; // 双向绑定外部颜色配置 private canvasRef: Canvas | null null; // 清空画布 public clear() { if (!this.ctx) return; const { width, height } this.canvasRef!.getBoundingClientRect(); this.ctx.clearRect(0, 0, width, height); // 清空整个画布 this.ctx.fillStyle this.bgColor; this.ctx.fillRect(0, 0, width, height); // 重新绘制背景 } // 保存签名为图片base64格式 public async saveAsImage(): Promisestring | null { if (!this.canvasRef) return null; try { // 导出图片格式png质量1.0 const imageData await this.canvasRef.toDataURL(image/png, 1.0); console.log(签名图片保存成功); return imageData; } catch (err) { console.error(签名图片保存失败, err); return null; } } // 重写onDraw更新画布引用 override onDraw(canvas: Canvas) { this.canvasRef canvas; this.ctx canvas.getContext(2d); // 背景绘制逻辑同上... } // build方法不变外部通过组件实例调用clear和saveAsImage }四、实战整合手写签名组件完整应用将自定义签名组件与配置面板结合实现完整的手写签名功能Entry Component struct SignatureDemoPage { State lineWidth: number 3; State lineColor: string #2f54eb; private signaturePadRef: SignaturePad | null null; build() { Column({ space: 20 }) .width(100%) .height(100%) .padding(30) .backgroundColor(#f5f5f5) { Text(手写签名组件演示) .fontSize(32) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .width(100%) // 自定义签名组件 SignaturePad( lineWidth: $lineWidth, lineColor: $lineColor, ref: (ref) this.signaturePadRef ref ) .width(100%) .height(300) .border({ width: 1, color: #eee }) .borderRadius(12) // 配置面板 Column({ space: 15 }) .width(100%) .padding(20) .backgroundColor(#ffffff) .borderRadius(12) { // 笔触粗细调节 Row({ space: 15, alignItems: ItemAlign.Center }) { Text(笔触粗细) .fontSize(18) .width(30%) Slider() .width(70%) .min(1) .max(10) .value(this.lineWidth) .onChange((value) this.lineWidth value) Text(${this.lineWidth}px) .fontSize(16) } // 笔触颜色选择 Row({ space: 15, alignItems: ItemAlign.Center }) { Text(笔触颜色) .fontSize(18) .width(30%) Row({ space: 10 }) { [#2f54eb, #ff4d4f, #36cfc9, #ffc53d, #000000].forEach(color { View() .width(30) .height(30) .backgroundColor(color) .borderRadius(15) .border(this.lineColor color ? { width: 2, color: #333 } : null) .onClick(() this.lineColor color) }) } } } // 操作按钮 Row({ space: 30 }) .width(100%) .justifyContent(FlexAlign.Center) { Button(清空签名) .type(ButtonType.Capsule) .width(150) .height(50) .backgroundColor(#ff4d4f) .onClick(() this.signaturePadRef?.clear()) Button(保存签名) .type(ButtonType.Capsule) .width(150) .height(50) .backgroundColor(#2f54eb) .onClick(async () { const imageData await this.signaturePadRef?.saveAsImage(); if (imageData) { Toast.show({ message: 签名保存成功 }); // 后续可将imageData上传服务器或本地存储 } else { Toast.show({ message: 签名保存失败 }); } }) } } } }五、实战踩坑指南1. Canvas 上下文获取失败确保 Canvas 组件已渲染完成再获取上下文避免在 build 阶段直接调用检查 API 版本getContext(2d)支持 API9低版本需使用getContext(2d, { compatible: true })。2. 绘制线条不流畅开启lineCap: round和lineJoin: round避免线条端点和交点出现锯齿触摸事件onTouchMove会频繁触发无需额外节流鸿蒙已优化但需确保绘制逻辑简洁。3. 图片保存失败确保 Canvas 组件有实际绘制内容空白画布可能导出失败保存图片需申请文件读写权限ohos.permission.WRITE_USER_DATA若需上传服务器可直接使用 base64 格式。4. 组件适配问题Canvas 尺寸建议使用百分比或自适应布局避免固定像素导致不同设备显示异常组件重绘时需先清空画布clearRect再重新绘制避免内容叠加混乱。加入班级学习鸿蒙开发