10

コア グラフィックスを使用して、線を描画しようとしています。影を追加しようとすると、線の内側に線と泡が作成されます。画像を参照してください。問題を解決できません。以下の私のコードを見つけてください

-(void)drawRect:(CGRect)rect
{

    [curImage drawAtPoint:CGPointMake(0, 0)];
    CGPoint mid1 = midPoint(previousPoint1, previousPoint2); 
    CGPoint mid2 = midPoint(currentPoint, previousPoint1);

    CGContextRef context = UIGraphicsGetCurrentContext(); 

    [self.layer renderInContext:context];

    CGContextMoveToPoint(context, mid1.x, mid1.y);
    CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y); 
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, self.lineWidth);
    CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);

    CGContextSetShadow(context, CGSizeMake(-16.00, -5.0f), 5.0f);

    CGContextStrokePath(context);

    [super drawRect:rect];

    [curImage release];

}

以下、touchesMoved方法です。

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{

    UITouch *touch  = [touches anyObject];

    previousPoint2  = previousPoint1;
    previousPoint1  = [touch previousLocationInView:self];
    currentPoint    = [touch locationInView:self];

    // calculate mid point
    CGPoint mid1    = midPoint(previousPoint1, previousPoint2); 
    CGPoint mid2    = midPoint(currentPoint, previousPoint1);

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, mid1.x, mid1.y);
    CGPathAddQuadCurveToPoint(path, NULL, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
    CGRect bounds = CGPathGetBoundingBox(path);
    CGPathRelease(path);

    CGRect drawBox = bounds;

    //Pad our values so the bounding box respects our line width
    drawBox.origin.x        -= self.lineWidth * 2;
    drawBox.origin.y        -= self.lineWidth * 2;
    drawBox.size.width      += self.lineWidth * 4;
    drawBox.size.height     += self.lineWidth * 4;

    UIGraphicsBeginImageContext(drawBox.size);
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    curImage = UIGraphicsGetImageFromCurrentImageContext();
    [curImage retain];
    UIGraphicsEndImageContext();
   [self setNeedsDisplayInRect:drawBox];

}

CGPoint midPoint(CGPoint p1, CGPoint p2)
{
    return CGPointMake((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5);
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    UITouch *touch = [touches anyObject];

    previousPoint1 = [touch previousLocationInView:self];
    previousPoint2 = [touch previousLocationInView:self];
    currentPoint = [touch locationInView:self];

    [self touchesMoved:touches withEvent:event];
}

ここで、行を追加しようとすると問題が発生します

CGContextSetShadow(context, CGSizeMake(-16.00, -5.0f), 5.0f);

発行イメージ

問題から私を助けてください、前もって感謝します。方法で編集の質問を参照してください。

4

3 に答える 3

8

一連のセグメントをクワッド カーブとして描いているように見えます。バブルは、前のセグメントと現在のセグメントが重なる場所になります。セグメント ラインは赤一色なので、オーバーラップはわかりませんが、暗い領域として影に表示されます。

ストロークの色をアルファ 0.5 (またはそのような半透明度) に設定してみてください。重複するセグメントも影と同様の効果を示すことがわかると思います (知っています)。

それを解決するには、線分ごとに連続したパスとしてセグメントを描画する必要があります。touchesBegan:withEvent:/ touchesMoved:withEvent/を使用しtouchesEnded:withEvent:て線の点を取得していると思いますか?

その場合、touchesBegan:withEvent:が呼び出されたときに、新しいパスを開始します。現在の画像上にtouchesMoved:withEvent新しいパスをレンダリングします。UIImageinへのパスをコミットしますtouchesEnded:withEvent:。この時点touchesBegan:withEvent:で、次のストロークで が再び呼び出されるまでパスを破棄できます。

アップデート

コード スニペットでは、実行ループごとにビュー全体を 3 回レンダリングすることになります。それは多くの描画オーバーヘッドです。上記の内容を示すコードを簡単にまとめました。これはテスト済みのコードではありませんが、ほぼ正しいはずです。

更新 2

私の最近の 2 つのコメントに基づいて、あなたが求めていることを実行するコードを書いてテストする時間が少しありました。このコードは、ビュー自体ではなく、View Controller からのものですが、少し変更すれば、必要に応じてビュー内を移動できます。UIImageViewそのため、ジェネリックに をサブビューとして追加してUIView、画像を保持および表示し (およびビュー コントローラーで参照を維持)、タッチ イベントを受信するためにビュー コントローラーをファーストレスポンダーにしました。独自のプロジェクトに統合するときにクリーンアップできる多くのハードコードされた値:

static
UIImage *CreateImage( CGRect rect, NSArray *paths )
{
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 1.0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGFloat colorComponents[4] = {0.0,0.0,0.0,0.0};
    CGContextSetFillColor(context, colorComponents);
    CGContextFillRect(context, rect);

    for ( id obj in paths ) {
        CGPathRef path = (CGPathRef)obj;
        CGContextAddPath(context, path);
    }    
    CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 5.0);
    CGContextSetShadow(context, (CGSize){-8.0,40}, 5.0);
    CGContextBeginTransparencyLayer(context, NULL);

    CGContextDrawPath(context, kCGPathStroke);

    CGContextEndTransparencyLayer(context);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

static
CGPoint MidPoint( CGPoint pt1, CGPoint pt2 )
{
    return (CGPoint){(pt1.x+pt2.x)/2.0,(pt1.y+pt2.y)/2.0};
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesBegan:touches withEvent:event];
    CGPoint location = [[touches anyObject] locationInView:self.view];
    myPath = CGPathCreateMutable();
    CGPathMoveToPoint(myPath, NULL, location.x, location.y);

    [self.paths addObject:(id)myPath];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesMoved:touches withEvent:event];
    UITouch *touch = [touches anyObject];
    CGPoint previousLocation = [touch previousLocationInView:self.view];
    CGPoint location = [touch locationInView:self.view];
    CGPoint midPoint = MidPoint(previousLocation, location);
    CGPathAddQuadCurveToPoint(myPath, NULL, midPoint.x, midPoint.y, location.x, location.y);

    self.imageView.image = CreateImage(self.view.bounds, self.paths);
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesEnded:touches withEvent:event];
    UITouch *touch = [touches anyObject];
    CGPoint previousLocation = [touch previousLocationInView:self.view];
    CGPoint location = [touch locationInView:self.view];
    CGPoint midPoint = MidPoint(previousLocation, location);
    CGPathAddQuadCurveToPoint(myPath, NULL, midPoint.x, midPoint.y, location.x, location.y);

    self.imageView.image = CreateImage(self.view.bounds, self.paths);

    CGPathRelease(myPath);
    myPath = nil;
}
于 2012-06-21T05:25:56.167 に答える
4

問題は、互いに上にある複数の行があることです。そのため、両方の影が重なって、より暗い色になります。

線画のような簡単なものについては、描画コード全体をコピーして、別の色とビュー ピクセル オフセット (影の代わりに) で再描画するだけです。たとえば、曲線を配列に保存し、後で個別に描画します。

編集：
OK @gschandlerも問題について説明しています。

ただし、Transparency Layerのドキュメントも参照してください。要素をグループ化し、グループに影を適用します。

于 2012-06-22T12:45:47.293 に答える
2

これに代わる別の方法は、タッチ移動イベントでポイントの配列を作成し、それらを描画することです..

点の配列を作成します:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[pointArray release]; pointArray = nil;
pointArray=[[NSMutableArray alloc] init];
UITouch *touch = [touches anyObject];
[bufferArray removeAllObjects];

previousPoint1 = [touch previousLocationInView:self];
previousPoint2 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];

}


-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
previousPoint2 = previousPoint1;
previousPoint1 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];
[pointArray addObject: [NSValue valueWithCGPoint:previousPoint2]];
[pointArray addObject:[NSValue valueWithCGPoint:previousPoint1]];   
[pointArray addObject:[NSValue valueWithCGPoint:currentPoint]];
[self setNeedsDisplay];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{   

}


-(void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);

CGContextSetShadow(context, CGSizeMake(-16.00, -5.0f), 5.0f);

for(int i = 1 ; i < [pointArray count]-1;i++)
{
CGPoint mid1 = midPoint([pointArray objectAtIndex:i+1], [pointArray objectAtIndex:i]); 
CGPoint mid2 = midPoint([pointArray objectAtIndex:i+2], [pointArray objectAtIndex:i+1]);


CGContextMoveToPoint(context, mid1.x, mid1.y);
CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y); 
i+=2;
}
CGContextStrokePath(context);

}

多次元配列で複数の行を管理できます:)

于 2012-06-25T12:04:53.533 に答える