更多内容请访问:与华为官方共建的Harmonyos技术社区https://harmonyos.51cto.com先来看看效果吧。实现idea的ideaiceDundun作为近段时间的顶级国脚,人气很高。Python、three.js等各种版本的冰盾在网上层出不穷。这次我们也将使用ArkUI制作一个冰盾。生产中最主要的是用好绘图组件。我使用的主要绘图组件有:ArkUI中的Shape、Path、Circle三个绘图组件。二、组件介绍1.Shape组件接口:Shape(value:{target?:PixelMap})关键属性:fill(形状填充颜色)、stroke(形状边框颜色)、strokeWidth(边框宽度)、antiAlias(是否反-aliasing,默认为'yes')使用示例:@Entry@ComponentstructShapeExample{build(){Column({space:5}){Shape(){//shape子元素Path().width(300).height(60).commands('M00L4000L400200Z')}//shapeviewport.viewPort({x:-80,y:-5,width:310,height:100})//fillcolor.fill(0x317Af7).stroke(0xEE8443).strokeWidth(10)//边框角style.strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5)}.width('100%').margin({top:15})//通用属性}}2.Path组件属性:width(路径所在矩形的宽度)、height(路径所在矩形的高度)、commands(路径绘制的命令字符串)使用示例:..........//执行MoveTo(150,0),LineTo(300,300),LineTo(0,300),ClosePath()Path().width(100).height(100).commands('M1500L300300L0300Z')//执行MoveTo(0,0),Horizo??ntalLineto(300),VerticalLineto(300),Horizo??ntalLineto(0),ClosePath()Path().width(100).height(100).commands('M00H300V300H0Z')//执行MoveTo(150,0),LineTo(0,150),LineTo(60,300),LineTo(240,300),LineTo(300,150),ClosePath()Path().width(100).height(100).commands('M1500L0150L60300L240300L300150Z')}.width('100%').......更多详细信息,请参考:Path组件文档3.Circle组件接口:Circle(options?:{width:Length,height:Length})参数:width(圆的宽度),height(圆的高度)使用示例:@Entry@ComponentstructCircleExample{build(){Flex({justifyContent:FlexAlign.SpaceAround}){//画一个直径为150的圆Circle({width:150,height:150})//画一个直径为150的圆Circle().width(150).height(150)}.width('100%').margin({top:5})//通用参数}}4.绘制冰墩的关键Path参数如下绘制冰墩墩左耳形状的主要参数//LeftearPath().commands("M950480S740350800600M800600S850520950480")M950480:Likepython-turtle库,我们都需要一个“画笔”M(moveto)来表示画笔的“落笔点”。下面两个数据可以理解为坐标系中的某个坐标点,比如M950480,即设备屏幕的左上角作为笛卡尔坐标系(0,0),我们的落笔pointis(横坐标,纵坐标)=>(950,480)S740350:S(smoothcurveto)表示拐点的坐标,一般来说就是转角的坐标。M600500L800500:L(lineto)表示直线终点坐标。上面这行参数的意思是:从(600,500)到(800,500)画一条线。示例效果3.源码@Entry@ComponentstructDwenDwen{build(){Flex({alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Shape(){//左耳+脸部轮廓Path().width('100%').height('100%').commands("M1000450S700270750650M750650S6758006501100").stroke(Color.Gray).strokeWidth(3).fill(Color.White)//左耳Path().width('100%').height('100%').commands("M950480S740350800600M800600S850520950480")//右耳+脸部轮廓Path().width('100%').height('100%').commands("M1000450S12004301450450M1450450S17502701700650M1700650S17758001775900W").strokeid.trograyth(3).(Color.White)//右耳Path().width('100%').height('100%').commands("M1500480S17003601650610M1650610S16205201500480")//左手圆Path().width('100%').height('100%').commands("M6501100S50012504001500M4001500S40017006501600M6501600S66015806701560M605605S60516001400").stroke(Color.Gray).strokeWidth(3).fill(Color.White)//左手路径().width('100%').height('100%').commands("M6601150S52012504401450S67015806501540S68014507001400S64013006601150").fill(Color.Black)//右手圆Path().width('100%').height('100%')。).fill(Color.White)//右手Path().width('100%').height('100%').commands("M1850670S19806002010720S1860110018401180S175011001760980S17509401790900S18108901830820S18008001850670").fill(Color.Black)//腿轮廓Path().width('100%').height')//Becurved20Candida50+0,+50//Leglength200.commands("M7201400S74016008001700M800S8201708201800M8202000M82020808602100L1100M110000M1100M11002100S1140208011402000M11402000S1240195013402000M13402000S1340208013802100M13802100L16202100M16202100S16602080208016602000M16602000L1660L16601800M1660M16601800S16601750175017001700M16801700M168017001700S1180011550年1月1550年1550年3月1550年1550年1月150.1550年1月14.15000.14.11800。Color.White)//左腿Path().width('100%').height('100%').commands("M8201700S920170011001840S970199011001925S1100196011002075L8702075S840850501800").fill(Color.Black)//右腿路径().width('100%').height('100%').commands("M16501700S1550170013701840S1500199013701925S1370196013902075L16102070S16402071801630")(颜色)./浅蓝环path().width('100%').height('100%').commands(“M7501000S800S8006001250600M1250600S1700S170060017501000M17501000S1700S1700S17001400140012501400M12501400M12501400S80014007507507507507507507501000").fill(Color.White).strokeWidth(4).stroke("#66C2FF").antiAlias(true)//蓝环路径().width('100%').height('100%')。.antiAlias(true)//红环路径().width('100%').height('100%').commands("M7851000S8356351250635M1250635S166563517151000M17151000S1665136512501365M12501365S83513657851000").fill(Color.White).strokeWidth(4).stroke(tru.antiColor.Red)(alia.anti.Red)环路径().width('100%').height('100%').commands(“M8001000S850650650650M1250650650S1650S1650S165065017001000M17001000M1650S1650S165013501350135013501350M1250M1250M1250S850S8501350135080010001000”).fill(Color.White).strokeWidth(4).stroke(Color.Yellow).antiAlias(true)//绿环路径().width('100%').height('100%').commands(“M8151000S8656651250665M1250665S166566516851000M16851000S16351335133512501335M12501335S865S865S86513358151000”)true)//左眼Path().width('100%').height('100%').commands(“M1000800S920780860940S86010508401050S90013001100920S6009901100800”).fill(Color.Black).antiAlias(true)Circle({width:45,height:45}).fill(Color.白色).offset({x:282,y:258})Circle({width:35,height:35}).fill("#aaccff").offset({x:288,y:263})Circle({width:20,height:20}).fill(Color.Black).offset({x:297,y:270})//右眼Path().width('100%').height('100%').commands("M1400800S15206501630940S1440115014401050S146012001400920S16509901399850").fill(Color.Black).antiAlias(true)//右眼珠4圆(width:4Circle(height:45}).fill(Color.White).offset({x:442,y:258})Circle({width:35,height:35}).fill("#aaccff").offset({x:448,y:263})Circle({width:20,height:20}).fill(Color.Black).offset({x:455,y:270})//鼻子Path().width('100%').height('100%').commands("M1200950S12509401300950S123011001200950").fill(Color.Black).strokeWidth(3).stroke(Color.Black).antiAlias(true)//嘴路径().width('100%').height('100%').commands("M11001050S1250130014001050M14001050S1250120011001050").fill(Color.Black).antiAlias(true)//logoText('北京2022').fontSize(20).fontStyle(FontStyle.Italic).offset({x:315,y:470})//五环圆({width:25,height:25}).fill(Color.White).stroke(Color.Blue).strokeWidth(3).offset({x:335,y:498})Circle({width:25,height:25}).fill(Color.White).stroke(Color.Black).strokeWidth(3).offset({X:365,y:498})Circle({width:25,height:25}).fill(Color.White).stroke(Color.Red).strokeWidth(3).offset({x:395,y:498})Circle({width:25,height:25}).fill(Color.White).opacity(0.4).stroke(Color.Yellow).strokeWidth(3).offset({x:350,y:515})Circle({width:25,height:25}).fill(Color.White).opacity(0.4).stroke(Color.Green).strokeWidth(3).offset({x:380,y:515})//爱图($r("app.media.love_icon")).width(30).height(30).offset({x:570,y:220})}}.width('100%')}}了解更多请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
