ArkTS开发系列之导航 (2.6 图形）

上篇回顾：ArkTS开发系列之导航 (2.5.2 页面组件导航）

本篇内容：显示图片、自定义图形和画布自定义图形的学习使用

一、知识储备

1. 图片组件（Image）

可以展示jpg 、png 、svg 、gif等各格式的网络和本地资源文件图片的组件
接口调用

Image(src: string | Resource | media.PixelMap)

实际代码调用

Image('images/view.jpg').width(200)//ets本次资源目录下
Image('https://www.example.com/example.JPG') // 网络图片实际使用时请替换为真实地址
Image($r('app.media.ic_hm_logo'))//resources/base/media目录下
Image($rawfile('snap'))//resources/rawfile目录下
Image('file://media/Photos/5').width(200)//手机媒体库中图片资源

从手机媒体库中选择图片

//从手机媒体库中选择图片try {let photoSelectOptions = new picker.PhotoSelectOptions(); //媒体库选择器设置photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; //图片类型photoSelectOptions.maxSelectNumber = 5; //最多 选取五张let photoPicker = new picker.PhotoViewPicker; //初始化图片选择器photoPicker.select(photoSelectOptions).then(photoSelectResult => { //选择结果回调this.imgListData = photoSelectResult.photoUris;console.error(`imgListData size is ${this.imgListData.length}`)}).catch(err=>{console.error(`select failed code is ${err.code}, msg : ${err.message}`)})} catch (err) {console.error(`load photo failed ${err.code}, msg: ${err.message}`)}

多媒体像素图

 http.createHttp().request(this.imgUrl, (err, data) => {if (err) {console.error(`err is ${JSON.stringify(err)}`)} else {let code = data.responseCode;if (ResponseCode.ResponseCode.OK == code) {let res: any = data.result;let imageSource = image.createImageSource(res)let options = {alphaTye: 0, //透明度editable: false, //是否可编辑pixelFormat: 3, //像素格式scaleMode: 1, //缩略值size: { height: 100, wight: 100 } //创建图片大小}imageSource.createPixelMap(options).then(pixelMap => {this.image = pixelMap;})}}})

常用函数
.objectFit(ImageFit.Fill)// 缩放类型
.interpolation(ImageInterpolation.High)//图片插值，抗锯齿，使图片看着更清晰
.renderMode(ImageRenderMode.Template) //图片渲染模式
.objectRepeat(ImageRepeat.X)//设置图片在xy轴上重复显示
.sourceSize({//设置图片解码尺寸
width: 65, height: 40
})
.colorFilter([//添加滤镜效果
1,1,0,0,0,
0,1,0,0,0,
0,0,1,0,0,
0,0,0,1,0
])
.syncLoad(true)//同步加载图片
.onComplete(msg=>{ 加载成功和失败的事件回调
if (msg) {
console.error(widthVal = ${msg.width}\n height = ${msg.height} \n componentW = ${msg.componentWidth} \n status = ${msg.loadingStatus})
}
})
.onError(()=>{
console.error(‘err’)
})

2. 自定义图形（shape）

有两种创建形式，一种以Shape为父组件，一种是绘制组件单独使用

Shape() {Rect().width(300).height(50)//以Shape作为父组件使用
}
Circle({ width: 150, height: 150 })//单独使用

绘制组件有七种类型：圆形（Circle）、椭圆形（Ellipse）、直线（Line）、拆线（Polyline）、多边形（Polygon）、路径（Path）、矩形（Rect）。
形状视口 viewPort

 Shape() {Rect({ width: 100, height: 100 }).fill(0xf7f7f7)Circle({ width: 150, height: 150 }).fill(0x00c250)}.viewPort({ x: 0, y: 0, width: 100, height: 100 })//根据这个视口与宽高比进行放大shape内的组件大小.width(150).height(150)

绘制一个“吉”字

Path().width(100).height(100).commands(`M${this._50} 0 L${this._50} ${this._50} L0 ${this._50} L${this._100} ${this._50} L${this._50} ${this._50} L${this._50} ${this._100} L${this._15} ${this._100} L${this._85} ${this._100} L${this._50} ${this._100} Z`).fillOpacity(0) //实心不填充颜色.fill(Color.Red).stroke(Color.Red).strokeWidth(5)Polyline().width(100).height(100).stroke(Color.Red).strokeWidth(5).points([[10, 10], [90, 10], [90, 90], [10, 90], [10, 10]]).fillOpacity(0) //实心不填充颜色

3. 画布自定义图形（Canvas）

初始化画布组件

  Canvas(this.context).width('100%').height('100%').backgroundColor(Color.Yellow).onReady(() => {

画圆形

this.context.beginPath()
this.context.arc(110, 150, 50, 0, 6.28)
this.context.stroke()
this.context.font = '56px'
this.context.fillText('圆形', 120, 220)//画圆形

画矩形

 this.context.beginPath()this.context.rect(110, 10, 210, 110)this.context.stroke()this.context.font = '46px'this.context.fillText('矩形', 120, 20)//画矩形

画椭圆形

this.context.beginPath()this.context.ellipse(110, 250, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2)this.context.stroke()//画椭圆形

写字

 let line = this.context.createLinearGradient(110, 500, 110, 600)line.addColorStop(0, '#f00')line.addColorStop(0.5, '#ff0')line.addColorStop(1, '#f0f')this.context.fillStyle = linethis.context.fillRect(110, 500, 100, 100)//渐变色this.context.fillText('我是中华人民共和国的公民', 110, 500)//写字

截图画图

  this.offContext.drawImage(this.image, 110, 400, 130, 130)let imageData = this.offContext.getImageData(150, 450, 130, 130)this.offContext.putImageData(imageData, 130, 130)let img = this.offContext.transferToImageBitmap();this.context.transferFromImageBitmap(img)//.截图画图

再次画个“吉”

let path = new Path2D();path.moveTo(100, 100)path.lineTo(100, 150)path.lineTo(25, 150)path.lineTo(175, 150)path.lineTo(100, 150)path.lineTo(100, 200)path.lineTo(40, 200)path.lineTo(160, 200)path.lineTo(100, 200)path.closePath()this.context.strokeStyle = '#f00'this.context.lineWidth = 5this.context.stroke(path)let path2 = new Path2D();path2.moveTo(40, 215)path2.lineTo(160, 215)path2.lineTo(160, 335)path2.lineTo(40, 335)path2.lineTo(40, 215)this.context.stroke(path2)//再次画个“吉”

二、效果一览

在这里插入图片描述

三、源码剖析

import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';
import picker from '@ohos.file.picker';@Entry
@Component
struct MyRouter {private tabsController: TabsController = new TabsController();@State currentIndex: number = 0;@Builder TabBuild(title: string, targetIndex: number, SelectedImg: Resource, normalImg: Resource) {Column() { //自定义tabImage(this.currentIndex == targetIndex ? SelectedImg : normalImg).size({ width: 25, height: 25 })Text(title).fontSize(16).fontColor(this.currentIndex == targetIndex ? 0x00c250 : 0x333333)}.width('100%').height(48).justifyContent(FlexAlign.Center).onClick(() => {console.error(`targetIndex is ${targetIndex}`)this.currentIndex = targetIndex;this.tabsController.changeIndex(this.currentIndex)})}@State image: PixelMap = undefined; //创建PixelMap状态变量private imgUrl: string = 'https://img1.baidu.com/it/u=3241660985,1063915045&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1194';loadImg() { //获取网络美女图片http.createHttp().request(this.imgUrl, (err, data) => {if (err) {console.error(`err is ${JSON.stringify(err)}`)} else {let code = data.responseCode;if (ResponseCode.ResponseCode.OK == code) {let res: any = data.result;let imageSource = image.createImageSource(res)let options = {alphaTye: 0, //透明度editable: false, //是否可编辑pixelFormat: 3, //像素格式scaleMode: 1, //缩略值size: { height: 100, wight: 100 } //创建图片大小}imageSource.createPixelMap(options).then(pixelMap => {this.image = pixelMap;})}}})}aboutToAppear() {// this.context = getContext();this.loadImg()}settings: RenderingContextSettings = new RenderingContextSettings(true)context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)img: ImageBitmap = new ImageBitmap('../../../resources/base/media/ic_hm_logo.svg')scroller: Scroller = new Scroller();@State _50: number = vp2px(50)@State _100: number = vp2px(100)@State _85: number = vp2px(85)@State _15: number = vp2px(15)@State _: number = vp2px(50)build() {Tabs({barPosition: BarPosition.End,controller: this.tabsController}) { //end start  首尾位置设置   controller 绑定tabs的控制器TabContent() { //内容页面组件MyNavigation().backgroundColor(0xf7f7f7)}.tabBar(this.TabBuild('首页', 0, $r('app.media.ic_hm_home_selected'), $r('app.media.ic_hm_home_normal')))TabContent() {Image(this.image).height('100%').width('100%')}.tabBar(this.TabBuild('直播', 1, $r('app.media.ic_hm_living_selected'), $r('app.media.ic_hm_living_normal')))TabContent() {Scroll(this.scroller) {Column() {Row() {Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Contain) //等比缩放，图片完全显示.margin(15).overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 30 } }).colorFilter([ //添加滤镜效果1, 1, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 1, 0]).syncLoad(true) //同步加载图片.onComplete(msg => {if (msg) {console.error(`widthVal = ${msg.width}\n height = ${msg.height} \n componentW = ${msg.componentWidth} \n status = ${msg.loadingStatus}`)}}).onError(() => {console.error('err')})Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Cover) //等比缩放， 图片显示部分.margin(15).overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Auto) //自适应显示.margin(15)}Row() {Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Fill) //填充显示，不保持等比缩放.renderMode(ImageRenderMode.Template) //图片渲染模式.margin(15).overlay('fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image(this.imgUrl).sourceSize({ //设置图片解码尺寸width: 65, height: 40}).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.ScaleDown) //保持原宽高比 等比缩放或不变.objectRepeat(ImageRepeat.XY) //设置图片在xy轴上重复显示.margin(15).overlay('scaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 30 } })Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.None) //保持图片原尺寸.interpolation(ImageInterpolation.High) //图片插值，抗锯齿，使图片看着更清晰.margin(15).overlay("none", { align: Alignment.Bottom, offset: { x: 0, y: 30 } })}}}.width('100%').height('100%')}.tabBar(this.TabBuild('朋友圈', 2, $r('app.media.ic_hm_friend_selected'), $r("app.media.ic_hm_friend_normal")))TabContent() {Canvas(this.context).width('100%').height('100%').backgroundColor(Color.Yellow).onReady(() => {this.offContext.drawImage(this.image, 110, 400, 130, 130)let imageData = this.offContext.getImageData(150, 450, 130, 130)this.offContext.putImageData(imageData, 130, 130)let img = this.offContext.transferToImageBitmap();this.context.transferFromImageBitmap(img)//.截图画图this.context.beginPath()this.context.rect(110, 10, 210, 110)this.context.stroke()this.context.font = '46px'this.context.fillText('矩形', 120, 20)//画矩形this.context.beginPath()this.context.arc(110, 150, 50, 0, 6.28)this.context.stroke()this.context.font = '56px'this.context.fillText('圆形', 120, 220)//画圆形this.context.beginPath()this.context.ellipse(110, 250, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2)this.context.stroke()//画椭圆形let line = this.context.createLinearGradient(110, 500, 110, 600)line.addColorStop(0, '#f00')line.addColorStop(0.5, '#ff0')line.addColorStop(1, '#f0f')this.context.fillStyle = linethis.context.fillRect(110, 500, 100, 100)//渐变色this.context.fillText('我是中华人民共和国的公民', 110, 500)//写字let path = new Path2D();path.moveTo(100, 100)path.lineTo(100, 150)path.lineTo(25, 150)path.lineTo(175, 150)path.lineTo(100, 150)path.lineTo(100, 200)path.lineTo(40, 200)path.lineTo(160, 200)path.lineTo(100, 200)path.closePath()this.context.strokeStyle = '#f00'this.context.lineWidth = 5this.context.stroke(path)let path2 = new Path2D();path2.moveTo(40, 215)path2.lineTo(160, 215)path2.lineTo(160, 335)path2.lineTo(40, 335)path2.lineTo(40, 215)this.context.stroke(path2)//再次画个“吉”})}.tabBar(this.TabBuild('画布', 3, $r('app.media.ic_hm_logo'), $r('app.media.icon')))TabContent() {Column() {Text('原始尺寸Circle')Circle({ width: 100, height: 100 }).fill(0x00c250)Row({ space: 10 }) {Column() {Text('shape内放大的Circle')Shape() {Rect({ width: 100, height: 100 }).fill(0xf7f7f7)Circle({ width: 150, height: 150 }).fill(0x00c250)}.viewPort({ x: 0, y: 0, width: 100, height: 100 }) //根据这个视口与宽高比进行放大shape内的组件大小.width(150).height(150)Path().width(100).height(100).commands(`M${this._50} 0 L${this._50} ${this._50} L0 ${this._50} L${this._100} ${this._50} L${this._50} ${this._50} L${this._50} ${this._100} L${this._15} ${this._100} L${this._85} ${this._100} L${this._50} ${this._100} Z`).fillOpacity(0) //实心不填充颜色.fill(Color.Red).stroke(Color.Red).strokeWidth(5)Polyline().width(100).height(100).stroke(Color.Red).strokeWidth(5).points([[10, 10], [90, 10], [90, 90], [10, 90], [10, 10]]).fillOpacity(0) //实心不填充颜色}}}}.tabBar(this.TabBuild('我的', 4, $r('app.media.ic_hm_my_selected'), $r('app.media.ic_hm_my_normal')))}.vertical(false) //tabs垂直与横向设置.scrollable(false) //禁止页面滑动.barMode((BarMode.Fixed)) //Fixed 固定    Scrollable  可以滑动，当tab多时用.onChange((index) => { //页面滑动监听console.error(`this is ${index}`)this.currentIndex = index;// this.tabsController.changeIndex(this.currentIndex)})}
}@Component
struct MyNavigation {private arr: number[] = [1, 2, 3];build() {Column() {Navigation() {TextInput({ placeholder: '请输入...' }).width('90%').height(40).backgroundColor('#ffffff')List({ space: 12 }) {ForEach(this.arr, item => {ListItem() {NavRouter() {Text("NavRouter" + item).width('100%').height(72).backgroundColor(Color.White).borderRadius(36).fontSize(16).fontWeight(500).textAlign(TextAlign.Center)NavDestination() {Text(`NavDestinationContent${item}`)}.title(`NavDestinationTitle${item}`)}}})}}.title('主标题').mode(NavigationMode.Stack).titleMode(NavigationTitleMode.Mini).menus([{ value: "", icon: './../../../resources/base/media/icon.png', action: () => {} },{ value: "", icon: './../../../resources/base/media/icon.png', action: () => {} }]).toolBar({ items: [{ value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {} },{ value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {} }] })}}
}