CODEWITHSUNDEEP
svgraphaeljquery-svg
user2046417
user2046417

Reputation:

clone rectangles and custom paths on drag

Couldn't any solution on other sites about how to clone rectangles and other custom paths on drag in raphael js.

I am able to clone circle and the same is not working for other paths. Any help will be appreciated.

<!doctype html>
<html>
    <head>
        <title>Editor</title>
        <meta http-equiv="x-ua-compatible" content="ie=9"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="<%=request.getContextPath()%>/raphael-min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
        <script type="text/javascript">
            window.onload = function ()
            {
                var paper = new Raphael(Raphael("container", "100%", "100%"));
                var sidebar = paper.rect(0, 43.5, 69, 620);
                var rect = paper.rect(10, 50, 51, 41, 5).attr({stroke: '#6DAACA', 'stroke-width': 1, fill: '#D6F2FC'});
                var circle1 = paper.circle(35, 145, 25).attr({fill: '#fff', 'stroke-width': 2, stroke: '#399324'});
                var circle2 = paper.circle(35, 225, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#9E2F3C'});
                var circle3 = paper.circle(35, 310, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#D5C096'});
                var Customrect = paper.path("M25 370 L10 370 L10 411 L25 411 L25 370 L61 370 L61 411 L25 411");

                // circle clonning
                paper.set(circle1);
                var clone_handler = function () {
                    var x = this.clone();
                    x.drag(move, start, up);
                };
                var start = function (x, y, event) {
                    this.ox = this.attr("cx");
                    this.oy = this.attr("cy");
                },
                        move = function (dx, dy) {
                            this.attr({
                                cx: this.ox + dx,
                                cy: this.oy + dy
                            });
                        },
                        up = function () {
//                            this.animate({
//                                r: 20,
//                                opacity: .8
//                            }, 500, ">");
                        };
                circle1.mousemove(clone_handler);
                circle2.mousemove(clone_handler);
                circle3.mousemove(clone_handler);
                rect.mousemove(clone_handler);



              //Custom Rectangle or Path

               paper.set(customRect);
            var clone_handler3 = function () {
                var z = this.clone();
                z.drag(move3, start3, up3);
            };
            var start3 = function (x, y, event) {
                this.crx = this.attr("x");
                this.cry = this.attr("y");
            },
                    move3 = function (dx, dy) {
                        this.attr({
                            x: this.crx + dx,
                            y: this.cry + dy
                        });
                    },
                    up3 = function () {
                    };
            customRect.mousemove(clone_handler3);
        };
            };
        </script>
    </head>
    <body>
        <div id="container">
            <div id="header" style="margin-bottom: 0;">
                <h1 id="title">Editor</h1>
                <div id="footer"></div>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Views: 420

Answers (1)

Ian
Ian

Reputation: 13852

The clone works fine. There's just lots of bugs you need to work through. You need to remove all of the other clutter for SO questions, just place concise examples on a jsfiddle.

If you do a clone on a mousemove, you end up with lots of clones, not just one, every slight movement. Thats probably not what you want. Create it on a click or some single event, rather than mousemoves.

Make sure the path is filled.

Move with a transform and not with x,y

Fix the initialisation of Raphael, eg not this..var paper = new Raphael(Raphael("container", "100%", "100%"));

Upvotes: 1

Related Questions