Cappuccino Web Framework 中是否有类似 HTML5 Canvas 的控件？

Question

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

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

Answer 1

在 Cappuccino 中，您可以在任何视图中执行自定义绘图。为此，请覆盖drawRect: 方法（继承自CPView 的任何方法，几乎​​是所有控件）。您可以使用CPBezierPath 之类的CPGraphics 工具，或者您可以使用带有CGContextAddPath 之类的命令的CoreGraphics 进行绘图 - 了解更多关于Core Graphics for Mac OS X 上的Apple 文档的后一种绘图风格会很有帮助。请记住，Cappuccino 是基于 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）。