鸿蒙原生绘图 API：从基础到高阶的绘制之旅（进阶版）

let path = new drawing.Path();

path.moveTo(10, 10);

path.lineTo(100, 100);

path.arcTo(100, 100, 200, 200, 0, 90);

let path = new drawing.Path();// 五角星的半径const radius = 100;// 计算五角星顶点坐标的辅助函数function calculateVertex(angle) {    return {        x: Math.sin(angle) * radius + 200,        y: -Math.cos(angle) * radius + 200    };}// 五角星的内角角度const angles = [    0,    Math.PI * 2 / 5,    Math.PI * 4 / 5,    Math.PI * 6 / 5,    Math.PI * 8 / 5];// 移动到第一个顶点path.moveTo(calculateVertex(angles[0]).x, calculateVertex(angles[0]).y);for (let i = 1; i < 5; i++) {    const vertex = calculateVertex(angles[i]);    path.lineTo(vertex.x, vertex.y);}// 闭合路径path.close();// 附加画笔并绘制路径let pen = new drawing.Pen();pen.setStrokeWidth(4);pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 });canvas.attachPen(pen);canvas.drawPath(path);canvas.detachPen();

drawRoundRect(roundRect: RoundRect): void

import { common2D, drawing } from '@kit.ArkGraphics2D';// 卡片的位置和大小let rect = { left: 50, top: 50, right: 250, bottom: 150 };// 圆角半径let roundRect = new drawing.RoundRect(rect, 15, 15);// 附加画刷设置背景颜色let brush = new drawing.Brush();brush.setColor({ alpha: 255, red: 240, green: 240, blue: 240 });canvas.attachBrush(brush);canvas.drawRoundRect(roundRect);canvas.detachBrush();// 附加画笔绘制边框let pen = new drawing.Pen();pen.setStrokeWidth(2);pen.setColor({ alpha: 255, red: 128, green: 128, blue: 128 });canvas.attachPen(pen);canvas.drawRoundRect(roundRect);canvas.detachPen();

drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void

drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void

drawImageRectWithSrc(pixelmap: image.PixelMap, srcRect: common2D.Rect, dstRect: common2D.Rect, samplingOptions?: SamplingOptions, constraint?: SrcRectConstraint): void

import { image, drawing, common2D } from '@kit.ArkUI';// 加载三张图片Promise.all([    image.createPixelMap(/* 图片1数据 */),    image.createPixelMap(/* 图片2数据 */),    image.createPixelMap(/* 图片3数据 */)]).then(([pixelMap1, pixelMap2, pixelMap3]) => {    // 绘制第一张图片    canvas.drawImage(pixelMap1, 20, 20);    // 绘制第二张图片    canvas.drawImage(pixelMap2, 150, 20);    // 绘制第三张图片，并对其局部放大展示    const srcRect = { left: 50, top: 50, right: 150, bottom: 150 };    const dstRect = { left: 280, top: 20, right: 400, bottom: 140 };    canvas.drawImageRectWithSrc(pixelMap3, srcRect, dstRect);});

let pen = new drawing.Pen();pen.setStrokeWidth(5);pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 });pen.setAntiAlias(true);canvas.attachPen(pen);// 绘制图形canvas.drawRect(10, 10, 110, 110);canvas.detachPen();

let brush = new drawing.Brush();brush.setColor({ alpha: 255, red: 0, green: 255, blue: 0 });canvas.attachBrush(brush);// 绘制图形canvas.drawCircle(100, 100, 50);canvas.detachBrush();

// 绘制按钮背景let brush = new drawing.Brush();brush.setColor({ alpha: 255, red: 100, green: 100, blue: 255 });canvas.attachBrush(brush);let rect = { left: 100, top: 100, right: 200, bottom: 150 };canvas.drawRoundRect(new drawing.RoundRect(rect, 10, 10));canvas.detachBrush();// 绘制按钮边框，模拟立体效果let pen = new drawing.Pen();pen.setStrokeWidth(2);// 上边框和左边框颜色较浅pen.setColor({ alpha: 255, red: 200, green: 200, blue: 255 });canvas.attachPen(pen);canvas.drawLine(100, 100, 200, 100);canvas.drawLine(100, 100, 100, 150);canvas.detachPen();// 下边框和右边框颜色较深pen.setColor({ alpha: 255, red: 50, green: 50, blue: 150 });canvas.attachPen(pen);canvas.drawLine(100, 150, 200, 150);canvas.drawLine(200, 100, 200, 150);canvas.detachPen();

canvas.clipRect({ left: 50, top: 50, right: 150, bottom: 150 }, drawing.ClipOp.DIFFERENCE, true);

import { image, drawing, common2D } from '@kit.ArkUI';image.createPixelMap(/* 图片数据 */).then((pixelMap) => {    // 设置裁剪区域为圆形    const circleRect = { left: 100, top: 100, right: 200, bottom: 200 };    const circlePath = new drawing.Path();    circlePath.addCircle(150, 150, 50);    canvas.clipPath(circlePath, drawing.ClipOp.INTERSECT);    // 绘制图片    canvas.drawImage(pixelMap, 0, 0);    // 清除裁剪区域    canvas.restore();});