Эффект собачьего уха в гибкой - PullRequest
Новая
       14

Эффект собачьего уха в гибкой

2 голосов
/ 20 мая 2010

Я использовал пакет graphics раньше, но не уверен, что это можно сделать. Я пытаюсь создать эффект уха собаки программно с помощью flex. Это можно сделать? Если это невозможно, какие еще опции или библиотеки у меня есть.

Ответы [ 2 ]

6 голосов
/ 20 мая 2010

Вы можете получить недокументированный drawRoundRectComplex () для модной версии с закругленными углами: 

graphics.drawRoundRectComplex(x, y, width, height, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius);

Это версия ActionScript инструментов Rectangle Primitive из панели инструментов.

Конечно, вы можете получить представление о классе Graphics, как подсказал @Robusto. А вот простая 45-угольная версия: 

var dogEars:Sprite = getDogEars45(200,100,15,0x009900,0x007700);
dogEars.x = dogEars.y = 50;
addChild(dogEars);


function getDogEars45(width:Number,height:Number,cornerSize:Number,baseFill:Number,highlightFill:Number):Sprite{
    var rect:Sprite = new Sprite();
    var base:Shape = new Shape();
    base.graphics.beginFill(baseFill);
    base.graphics.lineTo(width-cornerSize,0);
    base.graphics.lineTo(width,cornerSize);
    base.graphics.lineTo(width,height);
    base.graphics.lineTo(0,height);
    base.graphics.lineTo(0,0);
    rect.addChild(base);
    var corner:Shape = new Shape();
    corner.graphics.beginFill(highlightFill);
    corner.graphics.lineTo(cornerSize,cornerSize);
    corner.graphics.lineTo(0,cornerSize);
    corner.graphics.lineTo(0,0);
    corner.graphics.endFill();
    rect.addChild(corner);
    corner.x = width-cornerSize;
    return rect;
}

Вот как должна выглядеть грубая (45 угловая) версия:

dog ears

Обновление: Было несколько минут, чтобы поиграть с этим, вот код для округленных версий, для документирования: 

var dogEarsRounded:Sprite = getFlippedCornerRect(200,150,25,0x009900,0x00CC00);
dogEarsRounded.x = dogEarsRounded.y = 150;
addChild(dogEarsRounded);

var dogEarsRounded2:Sprite = getFlippedCornerRoundedRect(200,150,15,35,0x990000,0xCC0000);
dogEarsRounded2.x = dogEarsRounded2.y = 200;
addChild(dogEarsRounded2);

var dropShadow:DropShadowFilter = new DropShadowFilter(2,30,0,.5,2,2);
dogEarsRounded.filters = dogEarsRounded2.filters = [dropShadow];

function getFlippedCornerRect(width:Number,height:Number,cornerSize:Number,mainFill:int,cornerFill:int):Sprite{
    var result:Sprite = new Sprite();
    var topRight:Shape = new Shape();
    topRight.graphics.beginFill(mainFill);
    topRight.graphics.lineTo(width-cornerSize,0);
    topRight.graphics.lineTo(width,cornerSize);
    topRight.graphics.lineTo(width,height);
    topRight.graphics.lineTo(0,height);
    topRight.graphics.lineTo(0,0);
    topRight.graphics.endFill();
    result.addChild(topRight);
    var corner:Shape = new Shape();
    corner.graphics.beginFill(cornerFill);
    corner.graphics.curveTo(0,cornerSize,cornerSize,cornerSize);
    corner.graphics.lineTo(0,0);
    corner.graphics.endFill();
    result.addChild(corner);
    corner.x = width-cornerSize;
    return result;
}

function getFlippedCornerRoundedRect(width:Number,height:Number,rectRadius:Number,cornerSize:Number,mainFill:int,cornerFill:int):Sprite{
    var result:Sprite = new Sprite();
    var topRight:Shape = new Shape();
    var hw:Number = width * .5;
    var hh:Number = height* .5;
    topRight.graphics.beginFill(mainFill);
    topRight.graphics.lineTo(hw-cornerSize,0);
    topRight.graphics.lineTo(hw,cornerSize);
    topRight.graphics.lineTo(hw,hw);
    topRight.graphics.lineTo(0,hw);
    topRight.graphics.lineTo(0,0);
    topRight.graphics.endFill();
    topRight.x = hw;
    result.addChild(topRight);
    var corner:Shape = new Shape();
    corner.graphics.beginFill(cornerFill);
    corner.graphics.curveTo(0,cornerSize,cornerSize,cornerSize);
    corner.graphics.lineTo(0,0);
    corner.graphics.endFill();
    result.addChild(corner);
    corner.x = width-cornerSize;
    var topLeft:Shape = new Shape();
    topLeft.graphics.beginFill(mainFill);
    topLeft.graphics.drawRoundRectComplex(0, 0, hw, hh, rectRadius, 0,0,0);
    topLeft.graphics.endFill();
    result.addChild(topLeft);
    var bottomLeft:Shape = new Shape();
    bottomLeft.graphics.beginFill(mainFill);
    bottomLeft.graphics.drawRoundRectComplex(0, 0, hw, hh, 0, 0,rectRadius,0);
    bottomLeft.graphics.endFill();
    bottomLeft.y = hh;
    result.addChild(bottomLeft);
    var bottomRight:Shape = new Shape();
    bottomRight.graphics.beginFill(mainFill);
    bottomRight.graphics.drawRoundRectComplex(0, 0, hw, hh, 0, 0,0,rectRadius);
    bottomRight.graphics.endFill();
    bottomRight.x = hw;
    bottomRight.y = hh;
    result.addChild(bottomRight);
    return result;
}

С мягкой тенью, выглядит хорошо:

dog ears rounded

Вы можете заполнить угол с хорошим линейным градиентом, вы можете изменить функцию, чтобы вы могли выбирать, какие углы скруглены, а какие нет, дискретно анимировать его и т. Д. Получайте удовольствие!

Теперь я понимаю собачьи уши, просто интересно, что же случилось с загнутым углом: P

4 голосов
/ 20 мая 2010

Вы можете сделать простую версию этого, используя графический объект.

Сначала нарисуйте прямоугольник темного квадрата в верхнем углу контейнера. Затем нарисуйте закрашенный треугольник с белым фоном, начиная с верхнего левого угла вашего темного прямоугольника + 1, переместившись в нижний левый угол вашего темного прямоугольника + 1, переместитесь в прямоугольник влево + ширину прямоугольника и, наконец, вернитесь туда, откуда вы начали.

Узнайте о классе графики здесь .

...