Question

我可以使用jquery绘制线条，但当与raphael结合使用以创建svg元素时，我会基于鼠标移动而放弃绘图功能。

以上是这个问题：http://plnkr.co/edit/hJ8wjxE2P3U091XjJCKs?p=preview

代码：

<!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 src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
        <link rel="stylesheet" href="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);


                //Line Drawing
               var canvas = $('#canvas');
               var paper = Raphael(canvas.attr('id'), canvas.width(), canvas.height());

                var mouseDownX = 0;
                var mouseDownY = 0;
                var elemClicked;
                var shap;
                var borderColor = '#093';
                var fillColor = '#fff';
                var shapOpacity = .0;
                $(document).ready(function () {

                    $("#canvas").click(function (e) {

                        reset();

                        $(canvas).mousedown(function (e) {
                            e.originalEvent.preventDefault();
                            var offset = $(canvas).offset();
                            mouseDownX = e.pageX - offset.left;
                            mouseDownY = e.pageY - offset.top;

                            shap = drawLine(mouseDownX, mouseDownY, mouseDownX, mouseDownY);

                            $(canvas).mousemove(function (e) {
                                var offset = $(canvas).offset();
                                var upX = e.pageX - offset.left;
                                var upY = e.pageY - offset.top;

                                var width = upX - mouseDownX;
                                var height = upY - mouseDownY;

                                shap.updateEnd(upX, upY);

                            }); // end mouse down.

                        });// end mouse down.

                        $(canvas).mouseup(function (e) {
                            $(canvas).unbind('mousemove');
                        }); // end mouse up.

                    }); // end document ready.

//
                    $("#clear").click(function (e) {
                        $(canvas).find('rect, circle, path').each(function (i, obj) {
                            $(this).remove();
                        });
                    });

                    var start = function () {
                        this.ox = this.attr("x");
                        this.oy = this.attr("y");
                        this.attr({
                            opacity: shapOpacity
                        });

                        this.ow = this.attr('width');
                        this.oh = this.attr('height');
                    }

                    var move = function (dx, dy) {

                        nowX = Math.min(paper.width, this.ox + dx);
                        nowY = Math.min(paper.height, this.oy + dy);
                        nowX = Math.max(0, nowX);
                        nowY = Math.max(0, nowY);
                        this.attr({
                            x: nowX,
                            y: nowY
                        });

                        if (this.attr("fill") != fillColor)
                            this.attr({
                                fill: fillColor
                            });
                    }

                    var up = function () {
                        this.attr({
                            opacity: shapOpacity
                        });
                        if (this.attr("y") < 60 && this.attr("x") < 60)
                            this.attr({
                                fill: fillColor
                            });
                    };

                    var reset = function () {
                        $(canvas).unbind('mousedown');
                        $(canvas).unbind('mousemove');
                        $(canvas).unbind('mouseup');
                    }

                    function drawLine(startX, startY, endX, endY) {
                        var start = {
                            x: startX,
                            y: startY
                        };
                        var end = {
                            x: endX,
                            y: endY
                        };
                        var getPath = function () {
                            return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;
                        };

                        var redraw = function () {
                            node.attr("path", getPath());
                            node.attr({
                                stroke: borderColor
                            });
                        }

                        var node = paper.path(getPath());
                        $(node.node).attr('id', 'shap' + startX + startY);
                        node.click(function (e) {
                            elemClicked = $(node.node).attr('id');
                        });

                        return {
                            updateStart: function (x, y) {
                                start.x = x;
                                start.y = y;
                                redraw();
                                return this;
                            },
                            updateEnd: function (x, y) {
                                end.x = x;
                                end.y = y;
                                redraw();
                                return this;
                            }
                        };
                    }
                    ;
                });
            };
        </script>
    </head>
    <body>
        <div id="container">
            <div id="header" style="margin-bottom: 0;">

                <div id="footer"></div>
            </div>
        </div>
        <div class="controls"> 
        </div>
        <div class="dvcls" id="canvas"></div>
    </body>
</html>

当我用鼠标注释出行var paper = new Raphael(Raphael("container", "100%", "100%"));时似乎有效，但侧面的svg元素没有显示。

Answer 1

看起来正在发生的事情是你的两个div是重叠的，或者更具体地说是你用来处理jquery线条图的div（$('#canvas')完全由raphael svg覆盖（$('svg') ）。

尝试覆盖两个不同的显示器并处理它们之间的单击/拖动事件可能是可行的，但似乎它会继续导致您出现问题。

为什么不利用内置click handling的raphael？只需添加一个与画布大小相同的元素作为背景，并将点击处理程序附加到它。

编辑：或者，使用$('svg').mousedown(...)来触发您的线条绘制。使您免于必须使用背景元素。

无法使用jquery和raphael在画布上绘图

1 个答案: