Использование преобразований правильно

Question

В следующем коде я пытаюсь сделать шестиугольник, используя точки, которые я вывел вручную для гексагонной единицы, а затем я хотел бы увеличить его.Однако это не работает.Вместо белого гекса с зеленой рамкой я получаю сплошной зеленый гекс.Неужели я неправильно понимаю эффект масштабирования трансформации?Кажется, что он начинается с гексагона юнита и закрашивается до масштабированного гексагона, таким образом, цвет.Или это опять недоразумение?

Как получить масштабируемую фигуру с шириной границы X и желаемой заливкой цветом?

Polygon {
     points: [1, 0, 0.5, -0.866, -0.5, -0.866, -1, 0, -0.5, 0.866, 0.5, 0.866]
     fill: Color.WHITE
     translateX: 100
     translateY: 100
     strokeWidth: 2
     transforms: Scale {x: 20, y: 20}
     stroke: Color.GREEN
     opacity: 0.3
}

Answer 1

Кажется, проблема в том, что вы устанавливаете strokeWidth в 2.

штрих-ширина применяется ДО преобразования масштабирования, поэтому у вас есть единичный гекс с штрихом-шириной 2, который полностью скрывает белый гекс в центре. Этот затемненный (и, по-видимому, сплошной зеленый) гекс затем увеличивается в 20 раз, создавая зеленый гекс большего размера.

Попробуйте установить ширину хода ниже, например:

Polygon {
            points: [1, 0, 0.5,  - 0.866,  - 0.5,  - 0.866,  - 1, 0,  - 0.5, 0.866, 0.5, 0.866]
            fill: Color.WHITE
            translateX: 100
            translateY: 100
            strokeWidth: 0.5
            transforms: Scale {x: 20, y: 20}
            stroke: Color.GREEN
            opacity: 0.3
        }

и вы должны увидеть белый гекс с зеленой рамкой. Продолжайте уменьшать значение strokeWidth, пока не получите желаемые результаты.