本文介绍了使SVG变换矩阵绕其中心旋转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
HTML
<rect id="red" style="fill: red;" height="100" width="20"></rect>JS
var layer = { sizeReal : { "width": 20, "height": 100 } , sizeScaled : { "width": 10, "height": 50 } , position : { "x": 200, "y": 200 } , scale : 0.5 , rotation : 0 , matrix : [ 1, 0, 0, 1, 0, 0 ] }; // Not sure if its the cleanest way but it works it rotates itself arounds its center. // $("#red")[0].setAttribute( 'transform', 'translate(' + layer.position.x + ',' + layer.position.y +') rotate(' + layer.rotation +',' + ( layer.sizeScaled.width / 2 ) + ',' + ( layer.sizeScaled.height / 2 ) + ') scale(' + layer.scale + ',' + layer.scale +')' )现在我只想对矩阵做同样的事情.我正在使用西尔维斯特(Sylvester)将矩阵相乘.
Now i want to do the same only with a matrix. I'm using sylvester to multiply the matrixes.
我摆弄一个小提琴来弄清楚这个问题:)
I made a fiddle to make the question clear :)
jsfiddle/xYsHZ/3/
我希望红色矩形的行为与绿色矩形相同.我在做什么错了?
I want the red rect to behave the same as the green rect. What am i doing wrong?
推荐答案已修复!矩阵元素的顺序是错误的:)
Fixed!! the sequence of the matrix elements was wrong :)
$("#red")[0].setAttribute( 'transform', 'matrix(' + layer.matrix[ 0 ][ 0 ] + ',' + layer.matrix[ 1 ][ 0 ] + ',' + layer.matrix[ 0 ][ 1 ] + ',' + layer.matrix[ 1 ][ 1 ] + ',' + layer.matrix[ 0 ][ 2 ] + ',' + layer.matrix[ 1 ][ 2 ] + ')' ); },50);jsfiddle/6DR3D/2/
更多推荐
使SVG变换矩阵绕其中心旋转
发布评论