Question

无法在其他网站上解决如何在raphael js中拖动矩形和其他自定义路径的任何解决方案。

我可以克隆圆圈，但同样不适用于其他路径。任何帮助将不胜感激。

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

Answer 1

克隆工作正常。你需要解决很多错误。你需要删除SO问题的所有其他混乱，只需在jsfiddle上放置简洁的例子。

如果你在鼠标移动上进行克隆，你最终会得到很多克隆，而不仅仅是每一个细微的移动。那可能不是你想要的。通过单击或单个事件创建它，而不是鼠标移动。

确保路径已填满。

使用变换而不是使用x，y

进行移动

修复拉斐尔的初始化，例如不是这个..变量纸=新拉斐尔（拉斐尔（＆＃34;容器＆＃34;，＆＃34; 100％＆＃34;，＆＃34; 100％＆＃） 34））;

拖动时克隆矩形和自定义路径

1 个答案: