HarmonyOS 贝塞尔曲线绘制

用drwaing的path接口，画半圆但是会有闭合的路径，目前是想画一个拼图，不知道这个咋实现
HarmonyOS
Excelsior_abit
2024-12-25 15:54:08
浏览
回答 1
按赞同
按时间
Heiang
示例参考如下：
import { DrawContext, FrameNode, NodeController, RenderNode } from '@ohos.arkui.node';
import { UIContext } from '@ohos.arkui.UIContext';
import drawing from '@ohos.graphics.drawing';
import display from '@ohos.display';
import image from '@ohos.multimedia.image';

const TAG = 'DrawingTSSample';
let screen = display.getDefaultDisplaySync();
let screenWidth: number = screen.width;
let screenHeight: number = screen.height;
let pixelMap_: image.PixelMap | undefined;


class MyRenderNode extends RenderNode {
  private getPixmapFromMedia(resource: Resource): PixelMap {
    const unit8Array = getContext(this)?.resourceManager?.getMediaContentSync({
      bundleName: resource.bundleName,
      moduleName: resource.moduleName,
      id: resource.id
    })
    const imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength));
    const createPixelMap: image.PixelMap = imageSource.createPixelMapSync({
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888
    });
    createPixelMap.scaleSync(1, 1);
    return createPixelMap;
  }

  private getPath(startX: number, startY: number): drawing.Path {
    //滑块高度
    const blockHeight: number = vp2px(50);
    //滑块凸起部分高度
    const bulgingHeight: number = vp2px(10);
    //四个角圆弧半径
    const arcHeight: number = vp2px(5);
    //上下左右半圆半径大小
    const circleRadius: number = vp2px(6.5);
    //凸起半圆距边缘的间距
    const circleSpacing: number = vp2px(3.5);
    //上下左右半圆半径大小
    const edgeHeight: number = vp2px(13.5);
    //上下左右半圆贝塞尔曲线系数
    const circleBezierRatio: number = 0.5523;

    const path = new drawing.Path();
    path.moveTo(startX, startY + bulgingHeight + edgeHeight);
    path.lineTo(startX, startY + bulgingHeight + arcHeight);
    //左上角圆弧
    path.quadTo(startX, startY + bulgingHeight, startX + arcHeight, startY + bulgingHeight);
    path.lineTo(startX + edgeHeight, startY + bulgingHeight);
    //顶部半圆
    path.arcTo(startX + edgeHeight, startY, startX + edgeHeight + circleRadius * 2, startY + circleRadius * 2, 180,
      180);
    path.lineTo(startX + edgeHeight + circleRadius * 2, startY + bulgingHeight);
    //右上角圆弧
    path.arcTo(startX + blockHeight - bulgingHeight * 2, startY + bulgingHeight, startX + blockHeight - bulgingHeight,
      startY + bulgingHeight * 2, 270, 90);
    path.lineTo(startX + blockHeight - bulgingHeight, startY + bulgingHeight + edgeHeight);
    //右侧半圆
    path.arcTo(startX + blockHeight - circleRadius * 2, startY + +bulgingHeight + edgeHeight, startX + blockHeight,
      startY + +bulgingHeight + edgeHeight + circleRadius * 2, 270, 180);
    path.lineTo(startX + blockHeight - bulgingHeight, startY + +bulgingHeight + edgeHeight + circleRadius * 2);
    //右下角圆弧
    path.arcTo(startX + blockHeight - bulgingHeight * 2, startY + blockHeight - bulgingHeight,
      startX + blockHeight - bulgingHeight, startY + blockHeight, 0, 90);
    path.lineTo(startX + blockHeight - bulgingHeight - edgeHeight, startY + blockHeight);
    //底部半圆
    path.lineTo(startX + blockHeight - bulgingHeight - edgeHeight, startY + blockHeight - circleSpacing);
    //底部半圆中心点坐标
    const bottomCenterX = startX + bulgingHeight * 2;
    const bottomCenterY = startY + blockHeight - circleSpacing;
    //底部半圆右侧1/4圆弧
    path.cubicTo(bottomCenterX + circleRadius, bottomCenterY - circleRadius * circleBezierRatio,
      bottomCenterX + circleRadius * circleBezierRatio, bottomCenterY - circleRadius,
      bottomCenterX, bottomCenterY - circleRadius);
    //底部半圆左侧1/4圆弧
    path.cubicTo(bottomCenterX - circleRadius * circleBezierRatio, bottomCenterY - circleRadius,
      bottomCenterX - circleRadius,
      bottomCenterY - circleRadius * circleBezierRatio,
      bottomCenterX - circleRadius, bottomCenterY);

    path.lineTo(startX + edgeHeight, startY + blockHeight);

    //左下角圆弧
    path.arcTo(startX, startY + blockHeight - bulgingHeight, startX + bulgingHeight, startY + blockHeight, 90, 90);
    path.lineTo(startX, startY + blockHeight - edgeHeight);
    //左侧半圆
    //左侧半圆中心点坐标
    path.lineTo(startX + circleSpacing, startY + blockHeight - edgeHeight);
    const leftCenterX = startX + circleSpacing;
    const leftCenterY = startY + edgeHeight + bulgingHeight + circleRadius;
    //左侧半圆右侧1/4圆弧
    path.cubicTo(leftCenterX + circleRadius * circleBezierRatio, leftCenterY + circleRadius,
      leftCenterX + circleRadius, leftCenterY + circleRadius * circleBezierRatio,

      leftCenterX + circleRadius, leftCenterY);
    //左侧半圆左侧1/4圆弧
    path.cubicTo(leftCenterX + circleRadius, leftCenterY - circleRadius * circleBezierRatio,
      leftCenterX + circleRadius * circleBezierRatio, leftCenterY - circleRadius,

      leftCenterX, leftCenterY - circleRadius);

    path.lineTo(startX, startY + edgeHeight + bulgingHeight);
    return path;
  }

  // 在RenderNode的draw中使用drawing自定义绘制
  async draw(context: DrawContext) {
    const canvas = context.canvas;
    let pixelMap: image.PixelMap = this.getPixmapFromMedia($r('app.media.icon_yummy_half_block_pic_02'));
    canvas.clipPath(this.getPath(600, 100), drawing.ClipOp.INTERSECT, true);
    let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST);
    if (pixelMap != null) {
      canvas.drawImage(pixelMap, 0, 0, options);
    }
  }
}

// 创建一个MyRenderNode对象
const newNode = new MyRenderNode();
// 定义newNode的像素格式
newNode.frame = {
  x: 0,
  y: 0,
  width: screenWidth,
  height: screenHeight
};


class TextRenderNode extends RenderNode {
  async draw(context: DrawContext) {
    const canvas = context.canvas;
    let brush = new drawing.Brush();
    brush.setColor({
      alpha: 255,
      red: 255,
      green: 0,
      blue: 0
    });
    let font = new drawing.Font();
    font.setSize(50);
    const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
    canvas.attachBrush(brush);
    canvas.drawTextBlob(textBlob, 60, screenHeight / 4);
    canvas.detachBrush();
  }
}

// 创建一个TextRenderNode对象
const textNode = new TextRenderNode();
// 定义textNode的像素格式
textNode.frame = {
  x: 0,
  y: 0,
  width: screenWidth,
  height: screenHeight
};

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode {
    this.rootNode = new FrameNode(uiContext);
    if (this.rootNode === null) {
      return this.rootNode;
    }
    const renderNode = this.rootNode.getRenderNode();
    if (renderNode !== null) {
      renderNode.frame = {
        x: 0,
        y: 0,
        width: 10,
        height: 500
      };
      renderNode.pivot = { x: 50, y: 50 };
    }
    return this.rootNode;
  }

  addNode(node: RenderNode): void {
    if (this.rootNode === null) {
      return;
    }
    const renderNode = this.rootNode.getRenderNode();
    if (renderNode !== null) {
      renderNode.appendChild(node);
    }
  }

  clearNodes(): void {
    if (this.rootNode === null) {
      return;
    }
    const renderNode = this.rootNode.getRenderNode();
    if (renderNode !== null) {
      renderNode.clearChildren();
    }
  }
}

@Entry
@Component
struct RenderTest {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      Row() {
        NodeContainer(this.myNodeController)
          .height('100%')
        Button("Draw Path")
          .margin({ bottom: 20, right: 12 })
          .onClick(() => {
            this.myNodeController.clearNodes();
            this.myNodeController.addNode(newNode);
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .shadow(ShadowStyle.OUTER_DEFAULT_SM)
      .alignItems(VerticalAlign.Bottom)
      .layoutWeight(1)
    }
  }

  // 将离屏绘制好的bitmap绘制到屏幕上
  public async drawImage() {
    if (pixelMap_ === null) {
      console.error(TAG, 'draw image pixelMap_ is null');
      return;
    }
    console.log(TAG, 'drawImage success');
    this.context.drawImage(pixelMap_, 0, 100);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
2024-12-25 18:26:41
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS 贝塞尔曲线绘制

订阅鸿蒙技术特刊，精选内容抢先看
