设置倾斜变换中心

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坐标系,转换和单位

• 7.4协调系统转换
• 7.5嵌套转换
• 7.6'变换'属性

在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嵌套变换中描述

通用矩阵

翻译矩阵

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方法的新小提琴.我相信它更容易阅读和理解