iPhone искажает CALayer

Question

Я новичок и делаю упражнения, чтобы познакомиться с CALayer ...

Я просто хочу знать, как "наклонить" (или наклонить) угол 45 ° CALayer?

Спасибо.

Answer 1

CALayers имеют свойство affineTransform, которое принимает CAAffineTransform .В этой документации прямо отмечается, что:

Масштабирование, вращение и перевод - это наиболее часто используемые манипуляции, поддерживаемые аффинными преобразованиями, , но возможен и перекос .

(выделение мое, очевидно)

Нет встроенного помощника для построения перекосного преобразования, но вы можете сделать что-то вроде (не проверено):

CGAffineTransform CGAffineTransformMakeSkew(CGFloat skewAmount)
{
    CGAffineTransform skewTransform = CGAffineTransformIdentity;
    skewTransform.b = skewAmount;
    return skewTransform;
}

Затем для перекосатак, чтобы вещи, которые были по вертикали, стояли под углом 45 градусов к горизонтали, которую вы бы использовали:

layer.affineTransform = CGAffineTransformMakeSkew(1.0f);

Answer 2

CALayers могут быть преобразованы с помощью матричных операций.Перекосное преобразование представлено следующей матрицей

Так что если вы хотите выполнить перекос по оси x, вы можете использовать следующий пример:

CALayer* layer = [CALayer layer];
layer.frame = CGRectMake(50,50,50,50);
layer.backgroundColor = [UIColor blueColor].CGColor;
[self.window.layer addSublayer:layer];

float theta = -45.0f;
CGAffineTransform t = CGAffineTransformIdentity;
t.b = tan(theta*M_PI/180.0f);
layer.transform = CATransform3DMakeAffineTransform(t);

В следующем примере будет получен слой, похожий на следующий

Answer 3

Вы можете сделать это, но вам придется связываться со свойством layer transform, которое является struct CATransform3D.Вы должны будете сделать некоторую векторную математику, чтобы сделать это, как вы.См. compute_transform_matrix(...) функцию от этого ответа для получения более подробной информации.

Вы захотите сделать что-то вроде этого:

CGRect r = layer.bounds;
layer.transform = compute_transform_matrix(r.origin.x,    r.origin.y,                 r.size.width,                 r.size.height,
                                           r.size.height, r.origin.y,                 r.size.width + r.size.height, r.origin.y,
                                           r.origin.x,    r.origin.y + r.size.height, r.size.width,                 r.origin.y );

Проверьте мою математику по этому вопросу.Это должно быть правильно.

Answer 4

Существует множество ресурсов о том, как работают преобразования, и для того, чтобы по-настоящему понять их (требуется, по крайней мере, мне!) Потребуется немного времени, вот некоторый простой код, который обязательно указывает, к какомуось преобразование применяется.

/*!
 * Positive `skewX` creates a shift to the left.
 * Negative `skewX` creates a shift to the right.
 *
 * `skewX` is NOT pixel based. Test values of 0.0f - 1.0f.
 */
CGAffineTransform CGAffineTransformMakeSkewX(CGFloat skewX)
{
    return CGAffineTransformMakeSkew(skewX, 0.0f);
}

/*!
 * Positive `skewY` creates a shift to the bottom.
 * Negative `skewY` creates a shift to the top.
 *
 * `skewY` is NOT pixel based. Test values of 0.0f - 1.0f.
 */
CGAffineTransform CGAffineTransformMakeSkewY(CGFloat skewY)
{
    return CGAffineTransformMakeSkew(0.0f, skewY);
}

/*!
 * Positive `skewX` creates a shift to the left.
 * Negative `skewX` creates a shift to the right.
 *
 * Positive `skewY` creates a shift to the bottom.
 * Negative `skewY` creates a shift to the top.
 *
 * The skew values are NOT pixel based. Test values of 0.0f - 1.0f.
 */
CGAffineTransform CGAffineTransformMakeSkew(CGFloat skewX, CGFloat skewY)
{
    return CGAffineTransformMake(1.0f, skewY, skewX, 1.0f, 0.0f, 0.0f);
}