Question

我使用Raphaeljs库绘制线条，我想存储线条起点和终点的坐标，但我无法获得正确的语法。

这是代码的一部分：

     $(document).ready(function () {

            var startX = new Array();
            var startY = new Array();
            var endX = new Array();
            var endY = new Array();


            $('input[type="checkbox"][name="check"]').change(function () {
                // proceed only when checked
                if (this.checked) {
                    drawLine();
                }
            });
        });


        function drawLine() {

            var linewidth = $("#width").val();
            var color = $("#background").val();

            function Line(startX, startY, endX, endY, raphael) {

                for(var i=0; i< 25; i++) {
                    var start = {
                        x: startX[i],
                        y: startY[i]

                    };
                    var end = {

                        x: endX[i],
                        y: endY[i]


                    };

                    console.log(startX[i],startY[i]);
                    console.log(endX[i],endY[i]);

                }



                var getPath = function () {
                    return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;
                };


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

                node = raphael.path(getPath());


                node.attr("stroke-width", linewidth); //sets the width of the line
                node.attr("stroke", color);

                startx = (node.getBBox().x);
                starty = (node.getBBox().y);
                //console.log(startx , starty);

                //sets the color of the line

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


            $(document).ready(function () {

                var pathLength = 0;
                var paper = Raphael("droppable", 1280, 470, 0, 0);
                $("#droppable").mousedown(
                        function (e) {
                            x = e.offsetX;
                            y = e.offsetY;
                            line = Line(x, y, x, y, paper);
                            $("#droppable").bind('mousemove', function (e) {
                                x = e.offsetX;
                                y = e.offsetY;


                                line.updateEnd(x, y);


                            });

                        });

                $("#droppable").mouseup(
                        function (e) {
                            $("#droppable").unbind('mousemove');
                        });
});
        }

在控制台日志中，我收到了未定义的错误消息Uncaught TypeError: Cannot read property '0' of undefined。

Answer 1

您正在将integers传递到Line函数，而期望arrays。然后尝试在Line的{{1}}函数内访问预期数组的第一个元素。您没有使用在代码顶部声明的数组。数组也是空的，因此即使将它们传递给startX[i]函数而不是整数，代码也不会起作用，因为没有任何元素可供引用。

尝试使用JQuery在数组中保存x和y坐标时获取未定义

1 个答案: