设置偏斜转换中心

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 forskewhow much distance will the element be translated(unwantedly), if iskew 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 Units7.4 Coordinate system transformations7.5 Nested transformations7.6 The ‘transform’ attributeIn 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 transformationsgeneric matrixtranslate matrixskewX matrixvar 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 jsfiddleupdate - a new fiddle using built-in SVGMatrix methods. I believe it's easier to read and understand 这篇关于设置偏斜转换中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！