Отправка объекта на сервер с помощью jQuery - PullRequest
Новая
       8

Отправка объекта на сервер с помощью jQuery

0 голосов
/ 12 апреля 2011

У меня настроен jsfiddle , потому что кода достаточно, но я также расскажу здесь.

Но сначала проблема.Я хотел бы отправить объект Shape на сервер для обработки на mouseup.Проблема, с которой я сталкиваюсь, заключается в том, что, когда я добавляю jQuery-функции ajax или load для проверки AJAX, я получаю какой-то неиспользуемый код, и все зависает.

сначала добавляемый мной код, чтобы вы могли попробовать его в jsfiddle 

        $('body').load('index.php/main/add_shape', shape, function () { shape.points["x"]});

Теперь о коде на скрипте js, чтобы посмотреть на него здесь и индексирование.

HTML 

<body>
    <canvas id="drawn" height="200" width="200">
        <p>Your browser doesn't support HTML5 and the canvas element.  You should probably upgrade to one of the following<br>
            <a href="http://www.google.com/chrome">Google Chrome</a><br>
            <a href="http://www.mozilla.com/">Firefox</a><br>
            <a href="http://www.apple.com/safari/">Safari</a><br>
            <a href="http://www.opera.com/">Opera</a>
         </p>
    </canvas>
</body>

CSS 

canvas {
    border: 1px solid #000;
}

JavaScript 

var eventMap = { 
   mousemove: "move",
   touchmove: "move",
   mousedown: "down",
   touchstart: "down",
   mouseup: "up",
   touchend: "up"
};

function Shape (type, color, height, width, radius, x, y) {
    this.type = type;
    this.color = color;
    this.h = height;
    this.w = width; 
    this.r = radius;
    this.points = ["x","y"];
    this.points["x"] = [x];
    this.points["y"] = [y];
};

var tools = {}
$(window).ready(function () {
    function init () {
        hex = 000000;
        canvas = $('#drawn').get(0)
        c = canvas.getContext('2d');
        c.lineJoin = "round";
        c.lineCap = "round";
        c.strokeStyle = "#"+hex;
        c.lineWidth = 1;
        tool = new tools['pencil']();
        $('canvas').bind('mousedown mousemove mouseup', mouse_Draw);        
    }

        function mouse_Draw (e) {
        var pos = findPos(this);
        e._x = e.pageX - pos.x;
        e._y = e.pageY - pos.y;
        if (eventMap[e.type] == "down") {
            shapes = new Shape (1, 2, null, null, null, e._x, e._y);
        } else if (eventMap[e.type] == "move") {
            shapes.points["x"].push(e._x);
            shapes.points["y"].push(e._y);
        } else if (eventMap[e.type] == 'up') {
            shapes.points["x"].push(e._x);
            shapes.points["y"].push(e._y);
            alert(shapes.points["x"].toString());
        }

        var func = tool[eventMap[e.type]];
        if (func) {
            func(e);            
        }
    }

    init();
});

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }

}

/*****************TOOLS*************/
tools.pencil = function () {
    var tool = this;
    tool.started = false;

    tool.down = function (e) {
        c.beginPath();
        c.moveTo(e._x, e._y);
        tool.started = true;
        shape = new Shape (pencil, c.strokeStyle, null, null, null, e._x, e._y);
    };

    tool.move = function (e) {
        if (tool.started) {
            c.lineTo(e._x, e._y);
            c.stroke();
            shape.points["x"].push(e._x);
            shape.points["y"].push(e._y);
        }
    };

    tool.up = function (e) {
        if (tool.started) {
            tool.started = false;
        }
    };
}

Как вы можете видеть при добавлении jQueryЗагрузите линию на tool.up, она замерзнет.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2011

если у вас хороший новый браузер ... 

tool.up = function (e) {
    if (tool.started) {
        tool.started = false;
        alert(JSON.stringify(shape));
    }
};

(или вы можете украсть код json с json.org), тогда вам просто нужно проанализировать серверную часть json

0 голосов
/ 12 апреля 2011

Ответ был, что объект был бесконечным циклом из-за этой строки 

    shape = new Shape (pencil, c.strokeStyle, null, null, null, e._x, e._y);

должно быть 

    shape = new Shape ('pencil', c.strokeStyle, null, null, null, e._x, e._y);
...