使用svg.js 2.1.1版
当试图旋转对象然后移动它时,看起来整个坐标系都在旋转,而不仅仅是对象。这就像两个轴都在随物体旋转。这不是我想要的——我想使用绝对坐标,而不是相对于物体。
也许我不懂SVG或SVG.js,我做错了什么,但对我来说这看起来很荒谬。
样本代码
var draw = SVG('drawing').size(300,300)
var img = 'https://pbs.twimg.com/profile_images/378800000674268962/06ce58cab26c3a0daf80cf57e5acb29b_400x400.jpeg'
var picture = draw.image(img, 100, 100)
picture.rotate(30)
var i = 20
picture.click(function() {
this.move(i,0)
i += 20
})
以下是我所说的小提琴示例:https://jsfiddle.net/dudek3370/swzqo5ye/8/
如果您想使用未旋转的坐标系并旋转某些东西,只需将旋转的项目放置在不旋转的容器中,然后移动容器。例如
var draw = SVG('drawing').size(300,300)
var img = 'https://pbs.twimg.com/profile_images/378800000674268962/06ce58cab26c3a0daf80cf57e5acb29b_400x400.jpeg'
var group = draw.group();
var picture = group.image(img, 100, 100)
picture.rotate(30)
var i = 20
group.click(function() {
this.move(i,0)
i += 20
})
<div id="drawing"></div>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js" type="text/javascript" charset="utf-8"></script>