设置偏斜转换中心 [英] Setting skew transformation center

问题描述

对于缩放，旋转等操作，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按钮.

解决方案

我知道这很旧，但是就可以了.

W3C SVG 1.1-7坐标系，转换和单位

• 7.4坐标系转换
• 7.5嵌套转换
• 7.6"transform"属性

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

For operations such as scale, rotate, Raphael.js provides individual methods, through which we can specify the origin of that transformation.

But for skew there is no method like ele.skew(xskewAmount,yskewAmount,xtransfOrigin,ytransfOrigin). So I went for the ele.transform method, like ele.transform("m1,0,.5,1,0,0") to perform a xskew. But I can't specify an origin here, so the element is getting translated incorrectly.

I'm need of following info:

• Is there any method through which i can set the transform origin for skew
• how much distance will the element be translated(unwantedly), if i skew an element. so that i can reposition the element manually.

my code: http://jsfiddle.net/tYqdk/1/

Please note the Skewx button at the bottom of the page.

解决方案

i know this is old but here goes.

W3C SVG 1.1 - 7 Coordinate Systems, Transformations and Units

• 7.4 Coordinate system transformations
• 7.5 Nested transformations
• 7.6 The ‘transform’ attribute

In section 7.6 they describe the rotation transformation about a point (cx,cy)

Simply - it's this matrix multiplication:

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

To apply this to skewX use:

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

• note: these matrix multiplications are described in 7.5 Nested transformations

generic matrix

translate matrix

skewX matrix

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

i forked your jsfiddle

update - a new fiddle using built-in SVGMatrix methods. I believe it's easier to read and understand

这篇关于设置偏斜转换中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！