设置倾斜变换中心

Question

对于缩放、旋转等操作，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.4 Coordinate system transformations
• 7.5 Nested transformations
• 7.6 The ‘transform’ attribute

在第 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 中描述

通用矩阵

平移矩阵

skewX 矩阵

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。我相信它更容易阅读和理解