是否有像Cappuccino Web Framework中的HTML5 Canvas这样的控件？

Question

我正在用Cappuccino创建一个webapp，我需要一种方法将形状（矩形，图像等）绘制到CPWindow上。我可以使用任何小部件/控件来执行此操作吗？在Sproutcore等其他框架中是否有这样的控件？或者我必须实现自己的？

我还想知道是否有办法使形状可拖动like this？

Answer 1

在Cappuccino中，您可以在任何视图中执行自定义绘图。要执行此操作，请覆盖drawRect:方法（从CPView继承的任何内容，这几乎是每个控件）。您可以使用像CPBezierPath这样的CPGraphics工具，也可以使用像CGContextAddPath这样的命令使用CoreGraphics进行绘制 - 以了解更多关于后者在Core Graphics for Mac OS X上绘制Apple文档的方式有用。请记住，卡布奇诺咖啡是基于Objective-C和Cocoa。

这是一个示例视图，它绘制一个带圆角矩形的黄色星形，其大小适合当前视图：

@implementation CustomDrawView : CPView
{
}

- (void)drawRect:(CGRect)aRect
{
    [super drawRect:aRect];

    [[CPColor whiteColor] set];
    [[CPBezierPath bezierPathWithRect:bounds] fill];

    var frame =[self bounds],
        shadow = [[CPShadow alloc] init];

    [shadow setShadowColor:[CPColor blackColor]];
    [shadow setShadowOffset:CGSizeMake(0, 3)];
    [shadow setShadowBlurRadius:5];

    //// Rounded Rectangle Drawing
    var roundedRectanglePath = [CPBezierPath bezierPathWithRoundedRect:CGRectMake(CGRectGetMinX(frame) + 3.5, CGRectGetMinY(frame) + 3.5, CGRectGetWidth(frame) - 7, CGRectGetHeight(frame) - 7) xRadius:7 yRadius:7];
    [[CPColor blackColor] setStroke];
    [roundedRectanglePath setLineWidth:1];
    var roundedRectanglePattern = [5, 1, 1, 1];
    [roundedRectanglePath setLineDash:roundedRectanglePattern phase:0];
    [roundedRectanglePath stroke];

    var starPath = [CPBezierPath bezierPath];
    [starPath moveToPoint:CGPointMake(CGRectGetMinX(frame) + 0.50000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.20513 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.43029 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.35357 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.31200 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.40445 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.38720 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.54707 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.38381 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.72696 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.50000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.66667 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.61619 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.72696 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.61280 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.54707 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.68800 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.40445 * CGRectGetHeight(frame))];
    [starPath lineToPoint:CGPointMake(CGRectGetMinX(frame) + 0.56971 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.35357 * CGRectGetHeight(frame))];
    [starPath closePath];
    [[CPColor yellowColor] setFill];
    [starPath fill];
    [CPGraphicsContext saveGraphicsState];
    [shadow set];
    [[CPColor whiteColor] setStroke];
    [starPath setLineWidth:3];
    var starPattern = [5, 1, 5, 1];
    [starPath setLineDash:starPattern phase:2];
    [starPath stroke];
    [CPGraphicsContext restoreGraphicsState];
}

@end

我从一组较大的drawing tests in Cappuccino中提取了这个。

在引擎盖下，Cappuccino将使用画布（如果可用）或必要时使用VML（对于某些版本的IE）。