当前位置: 首页 > 科技观察

HarmonyOS-Java教你画冰墩

时间:2023-03-14 09:53:29 科技观察

更多信息请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com简介冰盾盾买不到,金盾盾可以买不好意思,毛墩不能钩,橡皮泥不能捏,雪墩不能堆,但是我们可以用程序画一个冰刺;授人以鱼不如授人以渔。今天教大家如何手工制作冰盾盾!效果演示实现思路1建立坐标系工欲善其事,必先利其器。一些不错的工具,比如兵盾盾,可以画飞机、坦克、大炮;计算中心点的问题,这里的细节是中心线点和辅助线对齐,保证美观intcomponentHeight=EstimateSpec.getSize(heightEstimateConfig);this.width=componentWidth;this.height=componentHeight;centerX=this.width/2;centerY=this.height/2;//保证辅助线圆角centerX=((int)(centerX/50))*50;centerY=((int)(centerY/50))*50;Logger.d("宽度:"+宽度);Logger.d("身高:"+height);Logger.d("centerX:"+centerX);Logger.d("centerY:"+centerY);recordBg();//记录初始化时的坐标系和网格setEstimatedSize(EstimateSpec.getChildSizeWithMode(componentWidth,componentWidth,EstimateSpec.PRECISE),EstimateSpec.getChildSizeWithMode(componentHeight,componentHeight,EstimateSpec.PRECISE));returntrue;}初始化坐标系privatePointmCoo;//坐标系privatePicturemPicture;//坐标系和网格Canvas组件/***初始化时记录坐标系和网格*/privatevoidrecordBg(){//准备屏幕尺寸PointwinSize=newPoint(width,height);mCoo=newPoint(centerX,centerY);PaintgridPaint=newPaint();mPicture=新图片();画布recordCanvas=mPicture.beginRecording(winSize.getPointXToInt(),winSize.getPointYToInt());//绘制辅助网格HelpDraw2.drawGrid(recordCanvas,winSize,gridPaint);//绘制坐标系HelpDraw2.drawCoo(recordCanvas,mCoo,winSize,gridPaint);mPicture.endRecording();}在onDraw方法canvas.drawPicture(mPicture)中绘制坐标系;CanvasAuxiliaryClass/***AuxiliaryCanvas**@since2022-02-09*/publicclassHelpDraw2{/***绘制网格*/??publicstaticvoiddrawGrid(CanvasrecordCanvas,PointwinSize,Paintpaint){//初始化网格笔刷paint.setStrokeWidth(2);paint.setColor(颜色。灰色的);paint.setStyle(Paint.Style.STROKE_STYLE);//设置虚线效果newfloat[]{可见长度,不可见长度},偏移值paint.setPathEffect(newPathEffect(newfloat[]{10,5},0));recordCanvas.drawPath(HelpPath.gridPath(50,winSize),paint);}/***绘制坐标系*@paramrecordingcanvas*@paramcoo坐标系原点*@paramwinSize屏幕尺寸*@parampaintbrush*/publicstaticvoiddrawCoo(Canvasrecording,Pointcoo,PointwinSize,Paintpaint){//初始化网格画笔paint.setStrokeWidth(4);paint.setColor(Color.BLACK);paint.setStyle(Paint.Style.STROKE_STYLE);//设置虚线效果newfloat[]{可见长度,不可见长度},偏移值paint.setPathEffect(null);//画直线recording.drawPath(HelpPath.cooPath(coo,winSize),paint);//左箭头recording.drawLine(winSize.getPointX(),coo.getPointY(),winSize.getPointX()-40,coo.getPointY()-20,paint);recording.drawLine(winSize.getPointX(),coo.getPointY(),winSize.getPointX()-40,coo.getPointY()+20,油漆);//向下箭头recording.drawLine(coo.getPointX(),winSize.getPointY(),coo.getPointX()-20,winSize.getPointY()-40,paint);recording.drawLine(coo.getPointX(),winSize.getPointY(),coo.getPointX()+20,winSize.getPointY()-40,paint);//为坐标系绘制文本drawText4Coo(recording,coo,winSize,paint);}/***为坐标系绘制文字**@paramcanvascanvas*@paramcoo坐标系原点*@paramwinSize屏幕尺寸*@parampaintbrush*/privatestaticvoiddrawText4Coo(Canvascanvas,Pointcoo,PointwinSize,Paintpaint){//绘制文本paint.setTextSize(50);canvas.drawText(paint,"x",winSize.getPointX()-60,coo.getPointY()-40);canvas.drawText(paint,"y",coo.getPointX()-40,winSize.getPointY()-60);paint.setTextSize(25);//X正轴文本for(inti=1;i<(winSize.getPointX()-coo.getPointX())/50;i++){paint.setStrokeWidth(2);canvas.drawText(paint,100*i+"",coo.getPointX()-20+100*i,coo.getPointY()+40);paint.setStrokeWidth(5);canvas.drawLine(coo.getPointX()+100*i,coo.getPointY(),coo.getPointX()+100*i,coo.getPointY()-10,油漆);}//X负轴文字for(inti=1;iimage=PixelMapUtil.getPixelMapFromResource(getContext(),ResourceTable.Media_bdd);如果(image.isPresent()){PixelMappixelMap=image.get();intpw=pixelMap.getImageInfo().size.width;intph=pixelMap.getImageInfo().size.height;内部关闭X=centerX-pw/2;intoffY=centerY-ph/2;Logger.d("pw:"+pw+";ph:"+ph);RectFloatpixelRectFloat=newRectFloat(offX,offY,pw+offX,ph+offY);canvas.drawPixelMapHolderRect(新PixelMapHolder(pixelMap),pixelRectFloat,mPixelMapPaint);}}onDraw方法绘制图片drawPixelMap(canvas);3绘制冰墩贝塞尔曲线轮廓的理解与理解1.简单理解:(图源网络)2.二阶贝塞尔曲线求控制点示例:确定起点、终点,选择一个任意控制点//起点privatePointstart=newPoint(0,0);//终点privatePointend=newPoint(400,0);//控制点privatePointcontrol=newPoint(200,200);贝塞尔曲线@OverridepublicvoidonDraw(Componentcomponent,Canvascanvas){canvas.save();帆布。翻译(mCoo.getPointX(),mCoo.getPointY());drawHelpElement(canvas);//绘图辅助工具--控制点和参考选择//绘制贝塞尔曲线mBezierPath.moveTo(start.getPointX(),start.getPointY());mBezierPath.quadTo(control.getPointX(),control.getPointY(),end.getPointX(),end.getPointY());canvas.drawPath(mBezierPath,mPaint);mBezierPath.reset();//清除mBezierPathcanvas.restore();canvas.drawPicture(mPicture);}//绘图辅助工具--控制点和参考选择privatevoiddrawHelpElement(Canvascanvas){//绘制数据点和控制点mHelpPaint.setColor(newColor(0x8820ECE2));mHelpPaint.setStrokeWidth(20);canvas.drawPoint(start.getPointX(),start.getPointY(),mHelpPaint);canvas.drawPoint(end.getPointX(),end.getPointY(),mHelpPaint);画布.drawPoint(control.getPointX(),control.getPointY(),mHelpPaint);//绘制辅助线resetHelpPaint();canvas.drawLine(start.getPointX(),start.getPointY(),control.getPointX(),control.getPointY(),mHelpPaint);canvas.drawLine(end.getPointX(),end.getPointY(),control.getPointX(),control.getPointY(),mHelpPaint);}找控制点方法,这个可以找起点,终点,控制点@OverridepublicbooleanonTouchEvent(Componentcomponent,TouchEventtouchEvent){//根据触摸位置更新控制点,并提示重绘MmiPointpoint=touchEvent.getPointerPosition(touchEvent.getIndex());control.modify(point.getX()-mCoo.getPointX(),point.getY()-mCoo.getPointY());Logger.d("触控x:"+control.getPointX()+"y:"+control.getPointY());无效();returntrue;}触点打印效果及实际应用4、绘制过程开始的动画效果,原来是使用AnimatorValue实现的,发现API7可以实现,我们也有很多段;后期进化使用EventHandler实现分步绘制;EventRunnerrunnerA=EventRunner.getMainEventRunner();EventHandlerhandlerA=newEventHandler(runnerA){@OverrideprotectedvoidprocessEvent(InnerEventevent){super.processEvent(事件);如果(drawStep==0){drawStep=1;无效();如果(!drawLast){handlerA.sendEvent(1,10);}}};publicvoidstartDraw(){Logger.d(":");如果(drawLast){drawStep=0;handlerA.sendEvent(1);drawLast=false;}}drawsegment可以通过不断改变childStepPathMeasure的步长来改变每次绘制的效果pathMeasure=newPathMeasure(mBezierPath,false);childStep=pathMeasure.getLength();//使用画笔虚线效果+偏移PathEffecteffect=newPathEffect(newfloat[]{pathMeasure.getLength(),pathMeasure.getLength()},childStep);mPaint.setPathEffect(效果);canvas.drawPath(mBezierPath,mPaint);小结1.中心点的确定和坐标系的建立可以达到快速开发的效果;2、本文主要使用二阶贝塞尔曲线来绘制;根据第一步的基础,再找到触摸事件中的相对坐标点;更多信息请访问:华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com