Cocos2d和iOS：无法理解使用ccBezierConfig的控制点的使用 [英] Cocos2d and iOS: Can't understand use of control points using ccBezierConfig

问题描述

编辑：如果问题写得很糟，请查看视频（ 3 ），链接如此页面的底部。

我试图使用 ccBezierConfig 和Cocos2D绘制一个非常简单的贝塞尔曲线。阅读维基百科我试图理解一点控制点，并找到这个图像：

http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bezier_2_big.png/240px-Bezier_2_big。 png

如果你在我拍摄的维基百科页面上看到一个很酷的动画。看看这里。

这是我使用的代码：

  CCSprite * r = [CCSprite spriteWithFile：@hi.png]; 
 r.anchorPoint = CGPointMake（0.5f，0.5f）; 
 r.position = CGPointMake（0.0f，200.0f）; 
 
 ccBezierConfig bezier; 
 bezier.controlPoint_1 = CGPointMake（0.0f，200.0f）; 
 bezier.controlPoint_1 = CGPointMake（180.0f，330.0f）; 
 bezier.endPosition = CGPointMake（320.0f，200.0f）; 
 
 id bezierForward = [CCBezierBy actionWithDuration：1 bezier：bezier]; 
 [r runAction：bezierForward]; 
 [self addChild：r z：0 tags：77]; 
 

应用程序在Portrait模式下运行，我的推测与 1 ，我的代码中的是：

  sprite.position应该对应于P0 
 bezier.controlPoint_1应该对应于P0 
 bezier.controlPoint_2应该对应于P1 
 bezier.endPosition应该对应于P2 
  

我尝试了两种方法。通过设置sprite的位置和不设置它。

我假设该位置应该与wikipedia模式中的controlPoint_1相同 1 只有三个点。

我得到一个输出我不安静了解..我做了一个小视频，是一个私人YouTube视频： p>

观看视频点击此处

解决方案

好的，答案很简单...

二次Bézier曲线 不是一个由cocos2d绘制。请改用 立方Bézier曲线 。

1. 初始位置是精灵（P0）的位置


2. 控制点1& 2是P1& P2。


3. 结束点是结束点。

Nice video，btw，我喜欢它xD。

---

来自 CCActionInterval.h 文件在cocos2d库中：

  / **将目标与三次贝塞尔曲线移动一定距离的动作。 
 * / 
 @interface CCBezierBy：CCActionInterval< NSCopying> 
 {
 ccBezierConfig config; 
 CGPoint startPosition; 
} 
  

---

此链接可以帮助您构建 cubicBézier曲线 ，而不是调整值和运行应用程序。

EDIT: If the question is badly written have a look at the video (3), same link as in the bottom of this page.

I am trying to draw a very simple bezier curve using ccBezierConfig and Cocos2D. Reading on Wikipedia I tried to understand a bit controls points and found this image:

http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bezier_2_big.png/240px-Bezier_2_big.png

If you look on the wikipedia page from which I took the image there is a cool animation. Have a look here.

This is the code I used:

        CCSprite *r = [CCSprite spriteWithFile:@"hi.png"];
        r.anchorPoint = CGPointMake(0.5f, 0.5f);
        r.position = CGPointMake(0.0f, 200.0f);

        ccBezierConfig bezier;
        bezier.controlPoint_1 = CGPointMake(0.0f, 200.0f);
        bezier.controlPoint_1 = CGPointMake(180.0f, 330.0f);
        bezier.endPosition = CGPointMake(320.0f,200.0f);

        id bezierForward = [CCBezierBy actionWithDuration:1 bezier:bezier];
        [r runAction:bezierForward];
        [self addChild:r z:0 tag:77];

The app runs on Portrait mode and my speculation matching the control points of 1 and the ones in my code was that:

sprite.position should correspond to P0
bezier.controlPoint_1 should correspond to P0 
bezier.controlPoint_2 should correspond to P1
bezier.endPosition  should correspond to P2

I did try two approaches. By setting the position of the sprite and by not setting it.

I assumed that position should be the same as controlPoint_1 as in the wikipedia schema 1 there are only three points.

I get an output I don't quiet understand.. I made a little video of it, is a private youtube video:

to see the video click here

解决方案

OK, the answer is rather simple...

The quadratic Bézier curve is not the one drawn by cocos2d. Instead, check the same wiki page for cubic Bézier curve. That's what you should be looking at.

1. Initial position is the position of the sprite (P0)
2. Control points 1 & 2 are P1 & P2, respectively.
3. End point is the end point.

Nice video, btw, I enjoyed it xD.

---

Evidence from the CCActionInterval.h file in the cocos2d library:

/** An action that moves the target with a cubic Bezier curve by a certain distance.
 */
@interface CCBezierBy : CCActionInterval <NSCopying>
{
    ccBezierConfig config;
    CGPoint startPosition;
}

---

This link should help you construct your cubic Bézier curves visually, instead of tweaking the values and running the app.

这篇关于Cocos2d和iOS：无法理解使用ccBezierConfig的控制点的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！