我尝试在rotation
中制作矩阵scale
,skew
和svg
,但是根据/周围点(x,y)
。
我尝试Make a SVG transform matrix rotate around its center但是当对象矩阵为[1,0,0,1,0,0]
=尚未编辑时,它对我有效。在我申请第一rotation
秒后,这是不可预测的,并在整个地方旋转。
当矩阵已经转换时,是否有人可以帮助我对矩阵进行简单的rotation(ANGLE)
,scaleX(NUMBER)
,scaleX(NUMBER)
,skewX(NUMBER)
和skewY(NUMBER)
操作全部取决于原始点x,y
?
请记住,矩阵已经转换,下次修改将来自修改后的下一个新矩阵。
matrix ( a: 0.9816080331802368, b:-0.1909615695476532, c: 0.1909615695476532, d: 0.9816080331802368, e: 120.33283996582031,f: -21.905738830566406)
(x,y)
旋转来转换矩阵?(x,y)
和skewX, skewY
缩放X,scaleY以及特定(x,y)
中的原始变换?感谢您的帮助。
答案 0 :(得分:0)
元素缩放,旋转,倾斜最方便的一点是获取其边界框的中心。使用该点首先转换元素,使其中心点位于原点,然后应用比例,或倾斜,或旋转,然后将元素转换回原始位置。
通过矩阵使用来实现这一目的:
此方法使用对象生成的方法来应用值,而不是构建基于文本的属性值。更清晰。
试试这个例子:
<!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>
答案 1 :(得分:0)
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.
转换是加法的,非矩阵转换只是一个长字符串。要查看其工作原理,请不要使用consolidate(),您将看到列表为请求转换的字符串