Hongmeng Bative Drawing API: یک سفر طراحی از Basic به Advanced (نسخه پیشرفته)

خانواده ، آیا شما هنوز هم استفاده اصلی API نقاشی Hongmeng را که آخرین بار کاوش کردم به یاد دارید؟ آیا شروع کار خیلی آسان نیست؟ امروز ، ما به عمیق تر ادامه خواهیم داد و نسخه پیشرفته یادگیری را شروع خواهیم کرد ، مهارت های پیچیده تر و پیچیده تر را باز می کنیم و اجازه می دهیم رابط کاربردی Hongmeng شما مستقیماً “از دایره” خارج شود!
من سناریوهای توسعه واقعی را برای غنی سازی موارد مسیرهای ترسیم ، مستطیل های گرد ، ترسیم تصاویر ، برس و برس و تنظیمات منطقه زراعی ترکیب می کنم ، به طوری که نمونه ها از نظر کاربردی تر و مرجع تر هستند.
1. نقاشی گرافیکی پیچیده
(من) ترسیم مسیر
هنگام ترسیم چهره های نامنظم مانند نمادهای منحصر به فرد و عناصر تزئینی خلاق ،Path
کلاس ها دستیاران دست راست می شوند ، که می تواند به ما در ایجاد و دستکاری مسیرهای مختلف پیچیده کمک کند. این مسیرها می توانند از خطوط مستقیم ، قوس ها ، منحنی های بزیر و غیره تشکیل شوند.
ایجاد یک شیء مسیر ساده است:
let path = new drawing.Path();
بعدی نقطه شروع مسیر را تنظیم کنید:
path.moveTo(10, 10);
سپس بخش خط را اضافه کنید:
path.lineTo(100, 100);
ترسیم قوس دشوار نیست:
path.arcTo(100, 100, 200, 200, 0, 90);
علاوه بر قوس ها ، از منحنی های Bezier مرتبه دوم نیز می توان استفاده کرد (quadTo
) و منحنی های Bezier مرتبه سوم (cubicTo
)
مورد: یک ستاره پنج نقطه ای را بکشید
نقاشی پنتاگرام نیاز به ترکیب خطوط مستقیم و منحنی های بزر دارد ، وPath
روشهای مربوط به کلاس با محاسبه دقیق مختصات هر راس اجرا می شود.
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();
در این حالت ، مختصات هر راس پنتاگرام توسط ریاضی بدست می آید وmoveTo
وتlineTo
روشها هر راس را به صورت دنباله وصل می کنند و در نهایت استفاده می کنندclose
این روش مسیر را می بندد و ترسیم ستاره های پنج نکته ای را درک می کند.
(2) نقاشی مستطیل گرد
مستطیل های گرد معمولاً در طرح هایی که رابط های زیبا و نرم را دنبال می کنند ، استفاده می شود. استفاده کردنdrawRoundRect
این روش قابل اجرا است:
drawRoundRect(roundRect: RoundRect): void
درRoundRect
این شی حاوی موقعیت ، اندازه و اطلاعات شعاع گوشه ای گرد مستطیل است.
مورد: یک طرح کارت را بکشید
چیدمان کارت در بسیاری از برنامه ها متداول است و با مستطیل های گرد به راحتی قابل دستیابی است.
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();
در این حالت ، ابتدا موقعیت ، اندازه و شعاع گوشه ای از کارت را تعریف کرده و ایجاد کنیدRoundRect
شیء. سپس از برس ها برای تنظیم رنگ پس زمینه استفاده کرده و مرزها را به طور جداگانه ترسیم کنید و به یک طرح ساده به سبک کارت برسید.
2. نقاشی تصویر
(من) تصاویر را ترسیم کنید
در توسعه برنامه ، ترسیم تصاویر روی بوم رایج است.drawImage
یک سری روش ها می توانند نیازها را برآورده کنند:
drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void
pixelmap
این شیء تصویر است که باید ترسیم شود.left
وتtop
مکان تصویر را روی بوم مشخص کنید.samplingOptions
برای تنظیم گزینه های نمونه برداری (پشتیبانی شده توسط API نسخه 12+) استفاده می شود.
با شروع API نسخه 12 ، یک رویکرد انعطاف پذیر تر اضافه شده است.drawImageRect
می توانید تصاویر را به یک منطقه مشخص بکشید:
drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void
drawImageRectWithSrc
سپس می توانید منطقه مشخص شده تصویر را به منطقه مشخص شده بوم بکشید:
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);
});
در این حالت ، استفاده کنیدPromise.all
سه تصویر را همزمان بار کنید و از آنها جداگانه استفاده کنیدdrawImage
وتdrawImageRectWithSrc
این روش تصویر را بر روی بوم ترسیم می کند ، یک اثر گالری تصویر ساده را پیاده سازی می کند و تا حدی زوم می کند و تصویر سوم را نشان می دهد.
3. تنظیم وضعیت و تنظیمات ویژگی
(من) برس و برس
هنگام ترسیم نمودار ،Pen
کلاس وBrush
کلاس ها می توانند به ما در تنظیم خطوط و پر کردن ویژگی ها کمک کنند تا گرافیک ها شخصی تر شوند.
Pen
کلاس می تواند رنگ خط ، عرض را تنظیم کند ، چه ضد بیضه و غیره.
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();
Brush
کلاس ها برای تنظیم خواص پر مانند رنگ پر استفاده می شوند.
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();
در این حالت ، ابتدا از یک برس برای ترسیم پس زمینه دکمه استفاده کنید و سپس از برس برای تنظیم رنگ های مختلف برای ترسیم مرزها برای شبیه سازی یک اثر سه بعدی استفاده کنید.
(ب) تنظیمات منطقه برداشت
بعضی اوقات ما فقط می خواهیم در یک منطقه خاص از بوم ترسیم کنیم ،clipRect
این روش قابل اجرا است:
canvas.clipRect({ left: 50, top: 50, right: 150, bottom: 150 }, drawing.ClipOp.DIFFERENCE, true);
پارامتر اول مستطیل ناحیه محصول را مشخص می کند و پارامتر دوم نوع عملکرد محصول است.ClipOp.DIFFERENCE
این بدان معناست که تفاوت در مجموعه ، یعنی تنها بخشی از بوم که در منطقه محصول نیست ، حفظ می شود.
مورد: اثر ماسک تصویر را بسازید
با تنظیم منطقه کشت ، می توانید یک اثر ماسک تصویر ایجاد کنید.
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();
});
در این حالت ، ابتدا یک مسیر دایره ای ایجاد کنید ، از آن استفاده کنیدclipPath
روش منطقه کشت را روی یک دایره تنظیم کرده و سپس تصویر را بکشید ، به طوری که تصویر فقط در قسمت دایره ای نمایش داده می شود و به اثر ماسک تصویر می رسد. آخرین مورد استفادهrestore
روش را برای نقاشی طبیعی بعدی پاک کنید.
خانواده ، در اینجا ما یادگیری محتوای پیشرفته API نقاشی Hongmeng را به پایان رسانده ایم! آیا احساس می کنید که یک قدم به خدای بزرگ نزدیک هستید؟ عجله کنید و تمرین کنید و این دانش را برای توسعه واقعی اعمال کنید. اگر با مشکلی روبرو شدید ، برای یافتن پاسخ ها به سند رسمی بروید ، یا در گروه مبادله فنی با دوستان خود صحبت کنید. دفعه بعد ، ما نسخه پیشرفته را به چالش می کشیم و مهارت های پیشرفته تر نقاشی را با هم کشف می کنیم.
هنگام توسعه برنامه های بومی Hongmeng ، افرادی که نیاز به استفاده از مؤلفه های نمودار دارند نیز می توانند از محاصره ما استفاده کنند. آدرس وب سایت رسمی نمودار: meichuangit.net.cn/
اگر پیشنهادات دیگری برای اصلاح پرونده دارید ، مانند افزودن یا حذف موارد سناریوی خاص ، تنظیم نظرات کد و غیره ، از شما خوشحال می شوید که آنها را در هر زمان ارسال کنید.