Установка центра перекоса - PullRequest
Новая
       0

Установка центра перекоса

3 голосов
/ 15 декабря 2011

Для таких операций, как scale, rotate, Raphael.js предоставляет отдельные методы, с помощью которых мы можем указать источник этого преобразования.

Но для асимметрии нет метода, подобного ele.skew(xskewAmount,yskewAmount,xtransfOrigin,ytransfOrigin).Поэтому я выбрал метод ele.transform, например ele.transform("m1,0,.5,1,0,0"), для выполнения xskew.Но я не могу указать источник здесь, поэтому элемент переводится неправильно.

Мне нужна следующая информация:

  • Есть ли способ, с помощью которого я могу установитьначало преобразования для перекоса
  • на какое расстояние будет переводиться элемент (нежелательно), если я перекошу элемент.чтобы я мог изменить положение элемента вручную.

мой код: http://jsfiddle.net/tYqdk/1/

Обратите внимание на кнопку Skewx внизу страницы.

1 Ответ

6 голосов
/ 10 сентября 2013

я знаю, что это старо, но здесь идет.

W3C SVG 1.1 - 7 Системы координат, преобразования и единицы

В разделе 7.6 они описывают преобразование вращения вокруг точки (cx, cy)

Проще - это матричное умножение: 

translate(<cx>, <cy>) • rotate(<rotate-angle>) • translate(-<cx>, -<cy>)

Чтобы применить это к skewX, используйте: 

translate(<cx>, <cy>) • skewX(<skew-angle>) • translate(-<cx>, -<cy>)

общая матрица enter image description here

матрица перевода enter image description here

матрица skewX enter image description here

var skewer = function(element, angle, x, y) {
  var box, radians, svg, transform;
  // x and y are defined in terms of the elements bounding box
  // (0,0)
  //  --------------
  //  |            |
  //  |            |
  //  --------------
  //             (1,1)
  // it defaults to the center (0.5, 0.5)
  // this can easily be modifed to use absolute coordinates
  if (isNaN(x)) {
    x = 0.5;
  }
  if (isNaN(y)) {
    y = 0.5;
  }
  box = element.getBBox();
  x = x * box.width + box.x;
  y = y * box.height + box.y;
  radians = angle * Math.PI / 180.0;
  svg = document.querySelector('svg');
  transform = svg.createSVGTransform();
  //creates this matrix
  // | 1 0 0 |  => see first 2 rows of
  // | 0 1 0 |     generic matrix above for mapping
  // translate(<cx>, <cy>)
  transform.matrix.e = x;
  transform.matrix.f = y;
  // appending transform will perform matrix multiplications
  element.transform.baseVal.appendItem(transform);
  transform = svg.createSVGTransform();
  // skewX(<skew-angle>)
  transform.matrix.c = Math.tan(radians);
  element.transform.baseVal.appendItem(transform);
  transform = svg.createSVGTransform();
  // translate(-<cx>, -<cy>)
  transform.matrix.e = -x;
  transform.matrix.f = -y;
  element.transform.baseVal.appendItem(transform);
};

я раздвоил твой jsfiddle

обновление - новая скрипка с использованием встроенных методов SVGMatrix. Я считаю, что легче читать и понимать

...