X (близкая) форма в SVG - PullRequest
Новая
       22

X (близкая) форма в SVG

1 голос
/ 14 апреля 2010

Я пытаюсь сделать эту форму SVG (игнорируйте цвет фона, только форму X)

Закрыть SVG Path

, но у меня нет Illustrator и он не знает, как его использовать.

Может кто-нибудь помочь с общей идеей или указать мне на альтернативы. Я использую его в flex.

1 Ответ

1 голос
/ 14 апреля 2010

Дешевый и простой способ сделать это - достать лист миллиметровки и разметить блок квадратов размером 16x16 (или другой размер). Напишите числа 0-15 вдоль верхней и левой сторон блока, каждое число соответствует одному из маленьких квадратов.

Затем нарисуйте свою фигуру (в данном случае X), начиная с одного из квадратов и не поднимая ручку из бумаги, продолжайте набросок, пока не вернетесь к исходной точке. (Это не обязательно должно быть идеально, или даже очень хороший рисунок.)

Далее составьте список точек, где линия меняет направление. Это те узлы, которые вы собираетесь использовать для рисования.

Давайте нарисуем простой направленный вниз треугольник в верхнем левом углу большого блока, используя этот метод. Начните с 0,0 и продолжайте до 0,7, после чего вы поворачиваете и продолжаете линию до 3,3, затем снова поворачиваетесь и продолжаете линию до 0,0 и останавливаетесь.

Теперь у вас есть массив точек: 

[new Point(0,0), new Point(0,3), new Point(3,3), new Point(0,0)];

Используя методы графического объекта, вы можете сделать следующее: 

private function drawInvertedTriangle():void {
    var aryPoints:Array = [
            new Point(0,0)
        ,   new Point(0,3)
        ,   new Point(3,3)
        ,   new Point(0,0)];
    var bgColor:uint = 0x0000CC; // darkish blue
    var child:Shape = new Shape();
    child.graphics.beginFill(bgColor);
    child.graphics.moveTo(aryPoints[0].x, aryPoints[0].y);
    for (var i:int=1; i<aryPoints.length; i++) {
        var pt:Point = aryPoints[i]; // for clarity in this sample
        child.graphics.lineTo(pt.x, pt.y)
    }
    child.graphics.endFill();
    addChild(child);
}

Я жестко закодировал ваши точки в этом методе, но вы могли бы легко сделать aryPoints аргументом функции, и в этом случае он будет рисовать любую фигуру, для которой у него есть массив по крайней мере из 3 элементов.

Теперь, для рисования X, который вы хотите, вы должны сначала использовать метод graphics.drawRoundRect (), а затем нарисовать X поверх этого. Исследуйте градиентную заливку и другие инструменты, доступные вам с помощью класса Graphics.

...