CubicTo를 사용하여 베 지어 곡선 그리기

user2943193

다음 코드는 BezierCurves를 생성하고 캔버스에 그릴 Path 개체를 만듭니다. 이 코드 를 C # .Net에서 Android 로 변환 했습니다 .

문제 : 점을 그릴 때 점이 연속 곡선을 형성하지 않습니다. 중간에서 깨졌다가 다시 계속됩니다. 나는 문제가 곡선을 생성하는 AddBeziers데 사용 했다고 생각합니다 cubicTo. GraphicsPath.AddBeziers.Net의 Method 와 일치하지 않을 수 있습니다 .

어떻게 해결할 수 있습니까?

생성 된 포인트

  • x 좌표-[0, 55, -44, -54, -44, 55, 0]
  • y 좌표-[0, -189, -20, -125, -230, -59, -250]

캔버스에 그려야 할 그림입니다.

Path figure = new Path();
BezierCurve verticalCurvex = BezierCurve.CreateVertical(250);
verticalCurvex.FlipVertical();                  
verticalCurvex.FlipHorizontal();
AddBeziers(figure, verticalCurvex.Points);

Android 용 AddBeziers 메서드

private Path AddBeziers(Path path, Point[] points) {

        int index = 1;
        if (points.length > 3) {
            path.moveTo(points[0].X, points[0].Y);
            path.cubicTo(points[index].X, points[index].Y, points[index + 1].X,
                    points[index + 1].Y, points[index + 2].X,
                    points[index + 2].Y);
        }

        index = index + 3;
        if (points.length > 5) {
            path.cubicTo(points[index].X, points[index].Y, points[index + 1].X,
                    points[index + 1].Y, points[index + 2].X,
                    points[index + 2].Y);
        }

        return path;
    }

Android 용 BezierCurve 클래스

package com.example.newone;

public class BezierCurve {

    // NOTE : A point's x and y positions are measured from bottom-left corner of the piece.
    // X~RATIO  =     point's x position / piece's width
    // Y~RATIO  =     point's y position / piece's height
    private static final double X2RATIO = 0.760869565217391;
    private static final double Y2RATIO = 0.183946488294314;

    private static final double X3RATIO = 0.0802675585284281;
    private static final double Y3RATIO = 0.150501672240803;

    private static final double X4RATIO = 0.5;
    private static final double Y4RATIO = Y2RATIO;

    private static final double X6RATIO = X2RATIO;
    private static final double Y6RATIO = Y2RATIO;

    private static final double X5RATIO = X3RATIO;
    private static final double Y5RATIO = Y3RATIO;

    private static final double CURVE_TENSION = 1.2;

    public Point[] Points ;

    public static BezierCurve CreateHorizontal(int length)
    {
        double curvature = length * CURVE_TENSION;

        int x1, y1;     // First curve's starting point
        int x2, y2;     // First curve's first control point
        int x3, y3;     // First curve's second control point
        int x4, y4;     // First curve's ending point, second curve's starting point
        int x5, y5;     // Second curve's first control point
        int x6, y6;     // Second curve's second control point
        int x7, y7;     // Second curve's ending point

        // First curve (first curve's ending point is (X4, Y4), which is also second curve's end point      
        x1 = 0;
        y1 = 0;

        x2 = x1 + (int)(length * X2RATIO);
        y2 = y1 + (int)(curvature * Y2RATIO);

        x3 = x1 + (int)(length * X3RATIO);
        y3 = y1 - (int)(curvature * Y3RATIO);

        x4 = x1 + (int)(length * X4RATIO);
        y4 = y1 - (int)(curvature * Y4RATIO);

        // Second curve (second curve's ending point is (X4, Y4) )      
        x7 = x1 + length;
        y7 = y1;

        x6 = x7 - (int)(length * X6RATIO);
        y6 = y7 + (int)(curvature * Y6RATIO);

        x5 = x7 - (int)(length * X5RATIO);
        y5 = y7 - (int)(curvature * Y5RATIO);

        BezierCurve curve = new BezierCurve();

        curve.Points  = new Point[] 
            {
                new Point(x1, y1), 
                new Point(x2, y2),
                new Point(x3, y3), 
                new Point(x4, y4),
                new Point(x5, y5), 
                new Point(x6, y6),
                new Point(x7, y7)
            } ;


        return curve;
    }

    public static BezierCurve CreateVertical(int length)
    {
        BezierCurve curve = CreateHorizontal(length);
        curve.Rotate(90);

        int offsetX = 0 - curve.Points[0].X;
        int offsetY = 0 - curve.Points[0].Y;

        return curve.Translate(offsetX, offsetY);            
    }

    public BezierCurve Translate(int transX, int transY)
    {            
        for (int i = 0; i < this.Points.length; i++)
        {
            this.Points[i].X += transX;
            this.Points[i].Y += transY;
        }

        return this;
    }

    public BezierCurve FlipHorizontal()
    {
        for (int i = 0; i < this.Points.length; i++)
        {
            this.Points[i].X *= -1;                
        }

        return this;
    }

    public BezierCurve FlipVertical()
    {
        for (int i = 0; i < this.Points.length; i++)
        {
            this.Points[i].Y *= -1;
        }

        return this;
    }

    // ===============================================
    // Transformation code adapted from C++ source code in the book
    // Direct3D Programming (Kickstart) by Clayton Walnum
    // ===============================================
    public BezierCurve Rotate(int degrees)
    {
        double radians = 6.283185308 / (360 / degrees);
        double cosine = Math.cos(radians);
        double sine = Math.sin(radians);

        for (int i = 0; i < this.Points.length; i++)
        {
            int rotatedX = (int)(this.Points[i].X * cosine - this.Points[i].Y * sine);
            int rotatedY = (int)(this.Points[i].Y * cosine + this.Points[i].X * sine);

            this.Points[i].X = rotatedX;
            this.Points[i].Y = rotatedY;
        }

        return this;
    }
}

포인트 등급

package com.example.newone;

public class Point {

        public int X;
        public int Y;

   public Point(int x , int y)
   {
       X= x;
       Y= y;
   }
}
송곳니

cubicTo ()에 대한 Android 문서에서

제어점 (x1, y1) 및 (x2, y2)에 접근하고 (x3, y3)에서 끝나는 마지막 점에서 3 차 베 지어를 추가합니다. 이 윤곽선에 대해 moveTo () 호출이 수행되지 않은 경우 첫 번째 점은 자동으로 (0,0)으로 설정됩니다.

path.cubicTo ()에 대한 두 번째 호출 전에 moveTo ()에 대한 호출을 추가해야하는 것 같습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

WPF : DrawingContext를 사용하는 베 지어 곡선

분류에서Dev

Flutter CustomPainter에서 베 지어 곡선을 사용하여 모양을 그리는 방법

분류에서Dev

베 지어 곡선의 반호 그리기

분류에서Dev

베 지어 곡선 그리기가 매우 느립니다.

분류에서Dev

2 차 베 지어 곡선으로 임의 경로 그리기

분류에서Dev

Fabric.js로 베 지어 곡선 그리기

분류에서Dev

계수를 사용하여 ggplot에서 곡선 그리기

분류에서Dev

MoveTo 태그로 시작하는 두 개의 평행 한 2 차 베 지어 곡선 경로를 닫는 방법

분류에서Dev

베 지어 곡선에 그라디언트를 추가하는 방법은 무엇입니까?

분류에서Dev

베 지어 곡선에 SKPhysicsBody를 적용하는 방법은 무엇입니까?

분류에서Dev

C #에서 작동하지 않는 재귀 베 지어 곡선 알고리즘

분류에서Dev

3 차 베 지어 곡선에서 루프를 방지하는 방법

분류에서Dev

주어진 암시 적 함수를 사용하여 베 지어 곡선의 제어점을 계산하는 방법은 무엇입니까?

분류에서Dev

cocos2d-x로 부드러운 베 지어 곡선 그리기

분류에서Dev

UIView에서 베 지어 곡선을 그리는 방법

분류에서Dev

MATLAB을 사용하여 분할 된 이미지에 곡선 그리기

분류에서Dev

2 차 베 지어 곡선 코드를 3 차 베 지어 곡선으로 변환하는 방법은 무엇입니까?

분류에서Dev

처리는 while 루프를 사용하여 완전한 곡선을 그리지 않습니다.

분류에서Dev

CSS의 베 지어 곡선?

분류에서Dev

N 차 베 지어 곡선

분류에서Dev

2D에서 베 지어 곡선의 법선 얻기

분류에서Dev

베 지어 곡선을 사용하는 사인 곡선에 대한 WPF 경로 설명

분류에서Dev

베 지어 곡선을 사용하는 사인 곡선에 대한 WPF 경로 설명

분류에서Dev

Raphael.js를 사용하여 가까운 지점을 통과하는 부드러운 벡터 곡선 그리기

분류에서Dev

물체를 피하는 베 지어 곡선 제어점을 계산하는 방법은 무엇입니까?

분류에서Dev

cytoscape.js에서 베 지어 곡선을 사용하는 방법

분류에서Dev

UIPinchGeustureRecognizer를 사용하여 선 그리기

분류에서Dev

GridSearchCV의 결과를 사용하여 검증 곡선을 어떻게 그릴 수 있습니까?

분류에서Dev

GridSearchCV의 결과를 사용하여 검증 곡선을 어떻게 그릴 수 있습니까?

Related 관련 기사

  1. 1

    WPF : DrawingContext를 사용하는 베 지어 곡선

  2. 2

    Flutter CustomPainter에서 베 지어 곡선을 사용하여 모양을 그리는 방법

  3. 3

    베 지어 곡선의 반호 그리기

  4. 4

    베 지어 곡선 그리기가 매우 느립니다.

  5. 5

    2 차 베 지어 곡선으로 임의 경로 그리기

  6. 6

    Fabric.js로 베 지어 곡선 그리기

  7. 7

    계수를 사용하여 ggplot에서 곡선 그리기

  8. 8

    MoveTo 태그로 시작하는 두 개의 평행 한 2 차 베 지어 곡선 경로를 닫는 방법

  9. 9

    베 지어 곡선에 그라디언트를 추가하는 방법은 무엇입니까?

  10. 10

    베 지어 곡선에 SKPhysicsBody를 적용하는 방법은 무엇입니까?

  11. 11

    C #에서 작동하지 않는 재귀 베 지어 곡선 알고리즘

  12. 12

    3 차 베 지어 곡선에서 루프를 방지하는 방법

  13. 13

    주어진 암시 적 함수를 사용하여 베 지어 곡선의 제어점을 계산하는 방법은 무엇입니까?

  14. 14

    cocos2d-x로 부드러운 베 지어 곡선 그리기

  15. 15

    UIView에서 베 지어 곡선을 그리는 방법

  16. 16

    MATLAB을 사용하여 분할 된 이미지에 곡선 그리기

  17. 17

    2 차 베 지어 곡선 코드를 3 차 베 지어 곡선으로 변환하는 방법은 무엇입니까?

  18. 18

    처리는 while 루프를 사용하여 완전한 곡선을 그리지 않습니다.

  19. 19

    CSS의 베 지어 곡선?

  20. 20

    N 차 베 지어 곡선

  21. 21

    2D에서 베 지어 곡선의 법선 얻기

  22. 22

    베 지어 곡선을 사용하는 사인 곡선에 대한 WPF 경로 설명

  23. 23

    베 지어 곡선을 사용하는 사인 곡선에 대한 WPF 경로 설명

  24. 24

    Raphael.js를 사용하여 가까운 지점을 통과하는 부드러운 벡터 곡선 그리기

  25. 25

    물체를 피하는 베 지어 곡선 제어점을 계산하는 방법은 무엇입니까?

  26. 26

    cytoscape.js에서 베 지어 곡선을 사용하는 방법

  27. 27

    UIPinchGeustureRecognizer를 사용하여 선 그리기

  28. 28

    GridSearchCV의 결과를 사용하여 검증 곡선을 어떻게 그릴 수 있습니까?

  29. 29

    GridSearchCV의 결과를 사용하여 검증 곡선을 어떻게 그릴 수 있습니까?

뜨겁다태그

보관