svg - 设置倾斜变换中心

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);
};

我 fork 了你的jsfiddle

更新 - 一个新的 fiddle使用内置的 SVGMatrix 方法。我相信它更容易阅读和理解