Image 拉法ë；l：旋转图像放错位置了_Image_Transform_Raphael_Rotation

Image 拉法ë；l：旋转图像放错位置了

image

Image 拉法ë；l：旋转图像放错位置了,image,transform,raphael,rotation,Image,Transform,Raphael,Rotation,使用下面的代码，我向页面添加了一个DIV，并在其中添加了一个拉斐尔，旋转的图像问题在于，虽然DIV和SVG对象的大小相同，但是 SVG不被放置在div的中间，而是被剪辑。在DIVs视口之外有人能解决这个问题吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

使用下面的代码，我向页面添加了一个DIV，并在其中添加了一个拉斐尔，旋转的图像

问题在于，虽然DIV和SVG对象的大小相同，但是 SVG不被放置在div的中间，而是被剪辑。在DIVs视口之外

有人能解决这个问题吗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/raphael2.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#btOK").click(function () {
            addImage('div8D8EC86F-8AF4-6F13-7595-066F96F06C58');
        });
    });
    function addImage(guid) {
        $("#divCanvas #" + guid).remove();

        //build div
        var $div = $("<div></div>").attr("id", guid).css({ 'position': 'absolute', 'top': '50px', 'left': '400px','border': 'solid 1px #000' });

        //add div to canvas
        $("#divCanvas").append($div);

        //image info
        var img = 'http://raphaeljs.com/bd.jpg';
        var width = 320;
        var height = 240;

        //area the paper needs to fit the rotated image
        var area = Math.sqrt((width * width) + (height * height));

        //angle
        var angle = 49;

        //paper
        var paper = Raphael(guid, area, area);

        //add and rotate image
        var img = paper.image(img, 0, 0, width,height).transform("r" + angle);

        //get image box info
        var bb = img.getBBox();

        //shrink the papers area
        paper.setSize(bb.width, bb.height);
    }
    </script>
</head>
<body>
<button id="btOK">Add image object</button>
<hr />
<div id="divCanvas"></div>
</body>
</html>


$（函数（）{
$（“#b确定”）。单击（函数（）{
addImage（'div8D8EC86F-8AF4-6F13-7595-066F96F06C58'）；
});
});
函数addImage（guid）{
$（“#divCanvas#”+guid.remove（）；
//建造部
var$div=$（“”）.attr（“id”，guid）.css（{'position'：'absolute'，'top'：'50px'，'left'：'400px'，'border'：'solid 1px#000'）；
//将div添加到画布
$（“#divCanvas”）。追加（$div）；
//图像信息
var img=http://raphaeljs.com/bd.jpg';
var宽度=320；
var高度=240；
//纸张需要适合旋转图像的区域
变量面积=数学sqrt（（宽度*宽度）+（高度*高度））；
//角度
var角=49；
//纸
var纸张=拉斐尔（guid、面积、面积）；
//添加和旋转图像
var img=纸张。图像（img，0，0，宽度，高度）。变换（“r”+角度）；
//获取图像框信息
var bb=img.getBBox（）；
//缩小纸张面积
纸张设置尺寸（bb.宽度、bb.高度）；
}
添加图像对象

感谢Ed Davies提供的解决方案：

var paper = Raphael(guid, area, area);
var img = paper.image(img, 0, 0, width, height).transform("r" + angle);
var bb = img.getBBox();
paper.setViewBox(bb.x, bb.y, bb.width, bb.height, true);