纯血鸿蒙来画龙！基于HarmonyOS ArkTS来操作SVG图片
大家好，龙年报喜，大地回春，作为程序员，以代码之名，表达对于龙年的祝福。本节将演示如何在基于HarmonyOS ArkTS的Image组件来实现画一条中国龙，祝大家“码”上“鸿”福到！本文涉及的所有源码，均可以在文末链接中找到。
创建应用
选择空模板。
https://i-blog.csdnimg.cn/blog_migrate/ba628a16dd3453328bd8b98198da0eac.jpeg
创建名为ArkTSSVGChineseLoong的HarmonyOS应用。
https://i-blog.csdnimg.cn/blog_migrate/3e6de009404a568c666cb3d345f4eb91.jpeg
焦点代码讲解
起首是准备SVG图片资源chineseloong.svg，放置media目录下。图片是这样的
https://i-blog.csdnimg.cn/blog_migrate/5a17a5f4936b6954dcfdd73702b79941.jpeg
主页Index.ets 重要是使用了Image来实现SVG图片显示。
代码如下：
@Entry
@Component
struct Index {
@State message: string = '画龙迎春，“码”上“鸿”福到';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(26)
.fontWeight(FontWeight.Bold)
Image($r('app.media.chineseloong'))
.height(390)
.width(330)
}
.width('100%')
}
.height('100%')
}
}复制
当然，此时的龙，还是一条睡着的黑龙，结果如下：
https://i-blog.csdnimg.cn/blog_migrate/6241f6a341dd2a5a22fb682a76cfa0c7.jpeg
如何来叫醒呢？可以加个按钮事件。
Button('画龙')
.onClick(()=>{ // 点击变化颜色
if (this.fillColor == Color.Black) { this.fillColor = Color.Red;
} else if (this.fillColor == Color.Red) { this.fillColor = Color.Blue;
}else if (this.fillColor == Color.Blue) { this.fillColor = Color.Orange;
}else if (this.fillColor == Color.Orange) { this.fillColor = Color.Pink;
}else if (this.fillColor == Color.Pink) { this.fillColor = Color.Black;
}
})复制
上述按钮事件，实现了颜色的切换。
其中fillColor是一个颜色变量，默认是黑色。
@State fillColor: Color = Color.Black;复制 我们把fillColor变量赋值到Image组件上。
Image($r('app.media.chineseloong'))
.height(390)
.width(330)
.fillColor(this.fillColor)复制
结果演示
https://i-blog.csdnimg.cn/blog_migrate/2ded1ca052a276a1350c1846d95aad72.jpeg
B站视频：【老卫搬砖】042期：纯血鸿蒙来画龙！基于HarmonyOS ArkTS来操作SVG图片_哔哩哔哩_bilibili
源码
见：GitHub - waylau/harmonyos-tutorial: HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]