2021-05-12 14:32:11
鴻蒙自定義元件之鴻蒙畫板
2020-09-22 15:00:03
初識鴻蒙OS 2.0
華為的鴻蒙OS 2.0是目前唯一個有希望和安卓、IOS對抗的全新生態系統。9月10日,在東莞正式釋出。華為喊出了「HarmonyOS 2.0 連線無限可能」的口號,將是未來十年很有競爭力的優秀作業系統。
自定義Component
這裡我編寫一個簡易的畫板。
1.新建一個類DrawComponment 繼承自Componment;
2.實現Component.TouchEventListener,用於對touch事件生成相應的path;
3.實現Component.DrawTask,用於把path畫到螢幕上;
程式碼
DrawComponment
package com.quqx.draw; import ohos.agp.components.Component; import ohos.agp.render.Canvas; import ohos.agp.render.Paint; import ohos.agp.render.Path; import ohos.agp.utils.Color; import ohos.agp.utils.Point; import ohos.app.Context; import ohos.hiviewdfx.HiLog; import ohos.hiviewdfx.HiLogLabel; import ohos.media.image.PixelMap; import ohos.multimodalinput.event.MmiPoint; import ohos.multimodalinput.event.TouchEvent; public class DrawComponment extends Component implements Component.DrawTask, Component.TouchEventListener { private static final String TAG = "DrawComponment"; PixelMap mPixelMap; Canvas mCanvas; Path mPath = new Path(); Paint mPaint; Point mPrePoint = new Point(); Point mPreCtrlPoint = new Point(); public DrawComponment(Context context) { super(context); //初始化paint mPaint = new Paint(); mPaint.setColor(Color.WHITE); mPaint.setStrokeWidth(5f); mPaint.setStyle(Paint.Style.STROKE_STYLE); //新增繪製任務 addDrawTask(this::onDraw); //設定TouchEvent監聽 setTouchEventListener(this::onTouchEvent); } @Override public void onDraw(Component component, Canvas canvas) { canvas.drawPath(mPath, mPaint); } @Override public boolean onTouchEvent(Component component, TouchEvent touchEvent) { switch (touchEvent.getAction()) { case TouchEvent.PRIMARY_POINT_DOWN: { //鴻蒙Log工具 HiLog.debug(new HiLogLabel(0, 0, TAG), "TouchEvent.PRIMARY_POINT_DOWN"); //獲取點資訊 MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex()); mPath.reset(); mPath.moveTo(point.getX(), point.getY()); mPrePoint.position[0] = point.getX(); mPrePoint.position[1] = point.getY(); mPreCtrlPoint.position[0] = point.getX(); mPreCtrlPoint.position[1] = point.getY(); //PRIMARY_POINT_DOWN 一定要返回true return true; } case TouchEvent.PRIMARY_POINT_UP: break; case TouchEvent.POINT_MOVE: { HiLog.debug(new HiLogLabel(0, 0, TAG), "TouchEvent.POINT_MOVE"); MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex()); Point currCtrlPoint = new Point((point.getX() + mPrePoint.position[0]) / 2, (point.getY() + mPrePoint.position[1]) / 2); //繪製三階貝塞爾曲線 mPath.cubicTo(mPrePoint, mPreCtrlPoint, currCtrlPoint); mPreCtrlPoint.position[0] = currCtrlPoint.position[0]; mPreCtrlPoint.position[1] = currCtrlPoint.position[1]; mPrePoint.position[0] = point.getX(); mPrePoint.position[1] = point.getY(); //更新顯示 invalidate(); break; } } return false; } }
MainAbilitySlice
package com.quqx.draw.slice; import com.quqx.draw.DrawComponment; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.DirectionalLayout.LayoutConfig; import ohos.agp.components.Text; import ohos.agp.colors.RgbColor; import ohos.agp.components.element.ShapeElement; import ohos.agp.utils.Color; import ohos.agp.utils.TextAlignment; public class MainAbilitySlice extends AbilitySlice { private DirectionalLayout myLayout = new DirectionalLayout(this); @Override public void onStart(Intent intent) { super.onStart(intent); LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT); myLayout.setLayoutConfig(config); DrawComponment drawComponment = new DrawComponment(this); drawComponment.setLayoutConfig(config); ShapeElement element = new ShapeElement(); element.setRgbColor(new RgbColor(0, 0, 0)); drawComponment.setBackground(element); myLayout.addComponent(drawComponment); super.setUIContent(myLayout); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } }
效果
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援it145.com。
相關文章