Есть ли такой элемент управления, как HTML5 Canvas в Cappuccino Web Framework?

Я создаю веб-приложение в Cappuccino, и мне нужен способ рисовать фигуры (прямоугольники, изображения и т. д.) на CPWindow. Есть ли какой-нибудь виджет/элемент управления, который я могу использовать для этого? Есть ли подобные элементы управления в других фреймворках, таких как Sproutcore? Или я должен реализовать свой собственный?

Я также хотел бы знать, есть ли способ сделать фигуры перетаскиваемыми подобно этому?


html5-canvas cappuccino
person TheUberEpic    schedule 13.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В Cappuccino вы можете выполнять пользовательский рисунок в любом виде. Для этого переопределите метод drawRect: (всего, что наследуется от CPView, а это почти каждый элемент управления). Вы можете либо использовать инструменты CPGraphics, такие как CPBezierPath, либо рисовать использование CoreGraphics с такими командами, как CGContextAddPath — чтобы узнать больше об этом последний стиль рисования документов Apple на Core Graphics for Mac OS X. Помните, что 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

Изображение того, что отображает приведенный выше код.

Я извлек это из большого набора тестов рисования в Cappuccino. .

Под капотом Cappuccino будет либо использовать холст, если он доступен, либо VML, когда это необходимо (для некоторых версий IE).

person Alexander Ljungberg    schedule 13.08.2013
comment
Это очень хорошо, но есть ли способ перемещать фигуры с помощью мыши подобно этому? (извините, что не указал это в исходном вопросе) - person TheUberEpic; 13.08.2013
comment
Да, но то, как вы это сделаете, немного зависит от того, сколько фигур вы хотите. Если у вас всего несколько фигур, я бы порекомендовал сделать для каждой формы свой собственный CPView. Это позволяет легко реагировать на щелчки и перетаскивания. С другой стороны, если вы собираетесь иметь довольно много, вам следует использовать один CPView, который рисует все прямоугольники и интерпретирует взаимодействие с мышью самостоятельно через mouseDown:, mouseUp: и mouseDragged:. Вот пример того, как определить, когда курсор мыши находится внутри фигуры (пути): github.com/cappuccino/cappuccino/blob/master/Tests/Manual/. - person Alexander Ljungberg; 13.08.2013