#object #jquery #freeze
#объект #jquery #замораживание
Вопрос:
У меня настроен jsfiddle, потому что там приличный объем кода, но я также обработаю его здесь.
Но сначала проблема. Я хотел бы отправить объект Shape на сервер для обработки на mouseup
. Проблема, с которой я сталкиваюсь, заключается в том, что когда я добавляю jQuery ajax или загружаю функции для тестирования 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
, она зависает.
Комментарии:
1. Я проверил скрипту. Кажется, у меня работает.
2. Скрипта работает, потому что она не загружает реальный URL
3. Я обновил базу jsfiddle, чтобы она отображалась в /echo / json
Ответ №1:
если у вас хороший новый браузер…
tool.up = function (e) {
if (tool.started) {
tool.started = false;
alert(JSON.stringify(shape));
}
};
(или вы можете украсть json-код из json.org ) затем вам просто нужно проанализировать json на стороне сервера
Ответ №2:
Ответ был таков: объект был бесконечным циклом из-за этой строки
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);