Raphaël：旋转图像放错位置

发布于 2024-12-14 00:47:18 字数 1884 浏览 0 评论 0原文

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

问题是虽然 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>

原文

With the code below I add a DIV to the page, to which I add a
Raphael.Image thats been rotated.

The problem is that while the DIV and SVG object is the same size the
SVG dont get placed in the middle of the DIV but instead clipped
outside the DIVs viewport.

Does anyone have a solution to this?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月依秋水 2024-12-21 00:47:18

感谢埃德·戴维斯提供的解决方案：

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

Thanks Ed Davies for the solution:

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

回复收藏 0 原文

~没有更多了~