CODEWITHSUNDEEP
imagetransformraphaelrotation
Mooja
Mooja

Reputation: 11

Raphaël: Rotated image get misplaced

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>

Upvotes: 0

Views: 824

Answers (1)

Mooja
Mooja

Reputation: 11

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

Upvotes: 1

Related Questions