Question

使用下面的代码，我在页面中添加了一个DIV，我添加了一个 Raphael.Image已被旋转。

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

有没有人有解决方案？

<!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>

Answer 1

感谢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);

Raphaël：旋转的图像错位

1 个答案: