Fatal编程技术网
  • matrix/
  • Matrix 围绕点x，y的SVG矩阵变换

Matrix 围绕点x，y的SVG矩阵变换

matrix svg

Matrix 围绕点x，y的SVG矩阵变换,matrix,svg,transform,Matrix,Svg,Transform,我试着在svg中使矩阵旋转，缩放和倾斜，但要根据点（x，y） 我尝试过，但当对象矩阵[1,0,0,1,0,0]=尚未编辑时，它对我有效。在我应用第一个旋转后第二个旋转是不可预测的，会到处旋转 当矩阵已经变换并且都依赖于原点时，x，y，有人能帮我做一些简单的旋转（角度），scaleX（数字），skewX（数字）和skewY（数字）操作吗 请记住，矩阵已经转换，下一次修改将来自修改后的下一个新矩阵 矩阵（a:0.981608033802368，b:-0.19096156954765532，c:0.1

我试着在svg中使矩阵旋转，缩放和倾斜，但要根据点（x，y）

我尝试过，但当对象矩阵
[1,0,0,1,0,0]
=尚未编辑时，它对我有效。在我应用第一个
旋转后
第二个旋转是不可预测的，会到处旋转

当矩阵已经变换并且都依赖于原点时，
x，y
，有人能帮我做一些简单的
旋转（角度）
，
scaleX（数字）
，
skewX（数字）
和
skewY（数字）
操作吗

请记住，矩阵已经转换，下一次修改将来自修改后的下一个新矩阵

矩阵（a:0.981608033802368，b:-0.19096156954765532，c:0.19096156954765532，d:0.981608033802368，e:120.3328399658231，f:-21.905738830566406）

  • 那么，如何通过围绕某个点旋转来变换矩阵呢
  • 如何在特定的
    （x，y）
    中使用点
    （x，y）
    和
    skewX，skewY
    以及原始变换缩放x，scaleY
感谢您的帮助。

对元素进行缩放、旋转和倾斜最方便的方法是获取其边界框的中心。使用该点首先平移图元，使其中心点位于原点，然后应用缩放、倾斜或旋转，然后将图元平移回其原始位置

要通过矩阵实现这一点，请使用：

  • 保存所有变换请求的矩阵对象
  • 附加到要变换的元素（本例中为多边形）的变换列表
  • 每次转换后，合并（）将转换列表合并为矩阵
    • 此方法使用对象生成的方法来应用值，而不是构建基于文本的属性值。更简洁

    试试这个例子：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='font-family:arial'>
<center>
(This example tested in: IE11/CH31/FF23)
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:8px;'>
Sequentially Transform an element about a fixed 'center point' in the element.
For this example, use the initial center of its bounding box.
</div>
<div id="svgDiv" style='background-color:lightblue;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<polygon id="myPolygon" fill="red" points="140,60 100,300 300,200 340,140" />
<circle id="centerPoint" r="4" fill="lime" stroke="black" stroke-width="1" />
</svg>
</div>
<button onClick=rotate()>rotate</button>
<button onClick=scaleXY()>scaleXY</button>
<button onClick=skewX()>skewX</button>
<button onClick=skewY()>skewY</button>
<button onClick=startOver()>start over</button>
 <br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
</body>
<script>
document.addEventListener("onload",init(),false)
function init()
{
    initTransform()
    svgSourceValue.value=svgDiv.innerHTML
}

var Cx,Cy
var TransformRequestObj
var TransformList
//---onload---
function initTransform()
{
    var bb=myPolygon.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    Cx=bbx+.5*bbw
    Cy=bby+.5*bbh
    centerPoint.setAttribute("cx",Cx)
    centerPoint.setAttribute("cy",Cy)

    TransformRequestObj=mySVG.createSVGTransform()
    var animTransformList=myPolygon.transform
    TransformList=animTransformList.baseVal
}
//--button--
function rotate()
{
    var angle=10

    TransformRequestObj.setRotate(10,Cx,Cy)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

    svgSourceValue.value=svgDiv.innerHTML
}
//---button---
function scaleXY()
{
    var scaleX=1.05
    var scaleY=1.05

    TransformRequestObj.setTranslate(Cx,Cy)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()
    TransformRequestObj.setScale(scaleX,scaleY)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()
    TransformRequestObj.setTranslate(-Cx,-Cy)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

    svgSourceValue.value=svgDiv.innerHTML

}
//---button---
function skewX()
{
    var skwX=5 //---deg

    TransformRequestObj.setTranslate(Cx,Cy)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

    TransformRequestObj.setSkewX(skwX)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

    TransformRequestObj.setTranslate(-Cx,-Cy)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

   svgSourceValue.value=svgDiv.innerHTML
}
//---button---
function skewY()
{
    var skwY=10 //---deg
    TransformRequestObj.setTranslate(Cx,Cy)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

    TransformRequestObj.setSkewY(skwY)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

    TransformRequestObj.setTranslate(-Cx,-Cy)
    TransformList.appendItem(TransformRequestObj)
    TransformList.consolidate()

    svgSourceValue.value=svgDiv.innerHTML
}
//---button---
function startOver()
{
    myPolygon.removeAttribute("transform")
    TransformRequestObj=mySVG.createSVGTransform()
    var animTransformList=myPolygon.transform
    TransformList=animTransformList.baseVal
}

</script>
</html>

    
（该示例在IE11/CH31/FF23中测试）
围绕元素中的固定“中心点”顺序变换元素。
对于本例，请使用其边界框的初始中心。
旋转
鳞状
斯克克斯
歪斜的
重新开始

    SVG源代码：
    
document.addEventListener（“onload”，init（），false）
函数init（）
{
initTransform（）
svgSourceValue.value=svgDiv.innerHTML
}
变量Cx，Cy
var TransformRequestObj
变量转换列表
//---装载---
函数initTransform（）
{
var bb=myPolygon.getBBox（）
变量bbx=bb.x
变量bby=bb.y
var bbw=bb.width
var bbh=bb.高度
Cx=bbx+0.5*bbw
Cy=bby+0.5*bbh
centerPoint.setAttribute（“cx”，cx）
centerPoint.setAttribute（“cy”，cy）
TransformRequestObj=mySVG.createSVGTransform（）
var animTransformList=myPolygon.transform
TransformList=animTransformList.baseVal
}
//--钮扣--
函数rotate（）
{
可变角度=10
TransformRequestObj.setRotate（10，Cx，Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
svgSourceValue.value=svgDiv.innerHTML
}
//---钮扣---
函数scaleXY（）
{
var scaleX=1.05
var scaleY=1.05
TransformRequestObj.setTranslate（Cx，Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
TransformRequestObj.setScale（scaleX、scaleY）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
TransformRequestObj.setTranslate（-Cx，-Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
svgSourceValue.value=svgDiv.innerHTML
}
//---钮扣---
函数skewX（）
{
var skwX=5/--deg
TransformRequestObj.setTranslate（Cx，Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
TransformRequestObj.setSkewX（skwX）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
TransformRequestObj.setTranslate（-Cx，-Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
svgSourceValue.value=svgDiv.innerHTML
}
//---钮扣---
函数skewY（）
{
var skwY=10/--deg
TransformRequestObj.setTranslate（Cx，Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
TransformRequestObj.setSkewY（skwY）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
TransformRequestObj.setTranslate（-Cx，-Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
svgSourceValue.value=svgDiv.innerHTML
}
//---钮扣---
函数startOver（）
{
myPolygon.removeAttribute（“变换”）
TransformRequestObj=mySVG.createSVGTransform（）
var animTransformList=myPolygon.transform
TransformList=animTransformList.baseVal
}
    变换是加法的，非矩阵变换只是一个长字符串。要了解其工作原理，请不要使用consolidate（），您将看到一系列请求转换的列表

    Genius，绝对是Genius，我花了一个多星期的时间，并没有接近您在10小时内实现的目标！！！！！我对SVG和矩阵修改非常陌生——但它太强大了——我喜欢它。非常感谢，只需要稍微调整一下，以适应我需要的套件，但看起来一切正常！：））是否有机会存储TransformList，然后在此保存的TransformList基础上进行修改请勿更改仅更改上一个位置？就像旋转是20'一样，我想加上35和44，所以第一次显示55，但第二次旋转不是55+44，而是回到20，加上这次44=64。希望是明确的！？问候并感谢您您应该能够操纵列表中的值。list对象有以下方法（在我使用TransformList时，请参见new answer（）。我相信consolidate（）不再是list，但在我使用matrix save separate时，我可以强制matrix使用animTransformList TransformRequestObj=mySVG.createSVGTransform（）吗 
    MyList.numberOfItems-Gets or sets the number of items in a list.
MyList.appendItem(newItem)-Inserts a new item at the end of the list.
MyList.clear()-Clears all existing items from the list, which creates an empty list.
MyList.getItem(index)-Returns the specified item from a list.
MyList.initialize(myItem)-Clears current items from the list and re-initializes the list to contain the specified item.
MyList.insertItemBefore(newItem,index)-Inserts a new item into a list at a specified position.
MyList.removeItem(myItem)-Removes an existing item from the list.
MyList.replaceItem(newItem,index)-Replaces a specified existing item in the list with a specified new item.