对应用了自由变换的图像进行动画处理

Animating an image with a free-transform applied?

本文关键字:动画 处理 图像 应用 自由 变换      更新时间:2023-09-26

我在我的Web应用程序中使用raphael jsraphael free-transform。问题是当我对图像进行动画处理时,只有图像在动画,而不是自由变换的 bbox。我希望自由 trnsform bbox 在我开始动画时应该随着图像移动。怎么办?

我的代码:

<b>Click on rectangle</b>
 <div  id="editor"></div>

.JS:

var paper = Raphael("editor", 635,500),
        canvas= document.getElementById('editor').style.backgroundColor='gray';
r = paper.rect(80,40,200,80,5).click(function () {
r.animate({transform:"r-10,0,0"}, 1000); 
});
r.attr({
         fill:'red',
    });
 ft= paper.freeTransform(r,{draw:['bbox'],
            rotate: true,keepRatio:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides'],
            scale:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]});

小提琴:http://jsfiddle.net/LJTPU/11/

有办法做到了。它工作正常。

ft.attrs.rotate =ft.attrs.rotate+90;