Question

对于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按钮。

Answer 1

我知道这已经过时了，但现在就去了。

W3C SVG 1.1 - 7 Coordinate Systems, Transformations and Units

在第7.6节中，他们描述了关于点（cx，cy）的旋转变换

简单 - 这是矩阵乘法：

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

将此应用于skewX使用：

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

注意：这些矩阵乘法在7.5 Nested transformations

泛型矩阵 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方法的新fiddle。我相信它更容易阅读和理解

设置倾斜变换中心

1 个答案: