I'm using HaxeFlixel with this code to create a filter with makeGraphic() instead of an image:
public function new()
{
trace('Shield created');
super();
makeGraphic(FlxG.width, FlxG.height, FlxColor.TRANSPARENT);
drawLine(30, 200, 300, 200, { thickness: 2, color: FlxColor.WHITE } );
var glowFilter = new GlowFilter(0x000000, 1, 10, 10, 3, 1);
spr2Filter = createFilterFrames(this, glowFilter);
tween2 = FlxTween.tween(glowFilter, { blurX: 10, blurY: 10 }, 1, { type: FlxTween.PINGPONG });
tween2.active = true;
}
override public function update(elapsed:Float):Void
{
updateFilter(this, spr2Filter);
super.update(elapsed);
}
function createFilterFrames(sprite:FlxSprite, filter:BitmapFilter)
{
var filterFrames = FlxFilterFrames.fromFrames(
sprite.frames, 50, 50, [filter]);
updateFilter(sprite, filterFrames);
return filterFrames;
}
function updateFilter(spr:FlxSprite, sprFilter:FlxFilterFrames)
{
sprFilter.applyToSprite(spr, false, true);
}
The problem is that it stops all animations. If I only apply the filter and comment the update() function everything is ok, but then the glow is not animated.
What am I doing wrong?
Related
I'm having a little trouble getting Undo/Redo to work when I'm using multiple ways to add objects. My editor has a button to add images, background, and text.
Therefore, I believe (please correct me if I'm wrong) I need to call the updateModifications() function each time I call a function that adds an image, background or text, along with each time the canvas is modified. I'm fairly certain the issue is that updateModifications is called too many times throughout the document.
function remove(){
console.log(canvas.getActiveObject());
var activeObjects = canvas.getActiveObjects();
canvas.discardActiveObject()
if (activeObjects.length) {
canvas.remove.apply(canvas, activeObjects);
}
updateModifications(true);
}
canvas.on({
'object:modified': function () {
updateModifications(true);
},
'object:added': function() {
updateModifications(true);
}
});
function addText() {
prodName = localStorage.getItem('storedName');
var textObj = new fabric.IText(prodName, {
fontSize: 22,
top: 362.5,
left: 262.5,
hasControls: true,
fontWeight: 'bold',
fontFamily: '"Montserrat",sans-serif',
fontStyle: 'normal',
centeredrotation: true,
originX: 'center',
originY: 'center'
});
canvas.insertAt(textObj,0).setActiveObject(textObj);
textToFront();
canvas.renderAll();
updateModifications(true);
}
This is creating some issues when code based on zaid's SO question;
var mods = 0;
var state = [];
function updateModifications(savehistory) {
if (savehistory === true) {
myjson = JSON.stringify(canvas);
state.push(myjson);
}
}
undo = function undo() {
if (mods < state.length) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
canvas.renderAll();
mods += 1;
}
}
redo = function redo() {
if (mods > 0) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
canvas.renderAll();
mods -= 1;
}
}
When you call addText(), you are calling updateModifications() and then have an event listener 'object:added' also calling updateModifications(). Either remove the event listener or simply dont call updateModifications() in addText().
Not sure then mate but this works for me in fabric 2.5:
var CanvasState = [];
var CanvasStateIndex = -1;
saveCanvas()
function refreshCanvas(){
canvas.renderAll.bind(canvas);
}
function saveCanvas(){
var newState = canvas.toJSON();
CanvasState.push(newState);
CanvasStateIndex = CanvasStateIndex +1;
while (CanvasStateIndex < (CanvasState.length)-1){
CanvasState.pop();
}
}
function undo(){
if (CanvasStateIndex >= 0){
CanvasStateIndex = CanvasStateIndex -1;
var jsonCanvas = CanvasState[CanvasStateIndex];
canvas.loadFromJSON(jsonCanvas, refreshCanvas, function(o, obj){
})
} else{
console.log('undo error CanvasStateIndex = '+CanvasStateIndex)
}
}
function redo(){
if (CanvasStateIndex < CanvasState.length -1){
CanvasStateIndex = CanvasStateIndex +1;
var jsonCanvas = CanvasState[CanvasStateIndex];
canvas.loadFromJSON(jsonCanvas, refreshCanvas, function(o, obj){
})
}else{
console.log('redo error CanvasStateIndex = '+CanvasStateIndex)
}
};
I have a background image and a separate ground image that I want to loop infinitely as long as the character is moving forward. When the character stops, the background and ground should not be moving. For similar games it is often suggested to add this.game.background.tilePosition.x -= 1
to the update function. This is not what I am looking for as it makes the background constantly move regardless of whether the character is moving. At the moment my background and ground images are repeating, but they are restricted to this.game.world.setBounds(0, 0, 1280, 800);. Any suggestions would be greatly appreciated. My code is below:
function Hero(game, x, y) {
Phaser.Sprite.call(this, game, x, y, 'player');
//rest of code for Hero constructor....
}
Hero.prototype = Object.create(Phaser.Sprite.prototype);
Hero.prototype.constructor = Hero;
//code for Hero.prototype....
PlayState = {};
PlayState.init = function () {
//code for keyboard...
};
PlayState.preload = function () {
this.game.load.json('level:1', 'data/level01.json');
this.game.load.image('ground', 'images/ground.png'); // I need this to
//repeat infinitely
this.game.load.image('background', 'images/background.png'); // I need
//this to repeat infinitely
this.game.load.spritesheet('player', 'images/player.png', 64, 64);
};
PlayState.create = function () {
this.game.world.setBounds(0, 0, 1280, 800);
this.game.background = this.game.add.tileSprite(0, 0,
this.game.world.width, 800, 'background');
this.game.ground = this.game.add.tileSprite(0, 680,
this.game.world.width, 166, 'ground');
this.game.physics.arcade.enable(this.game.ground);
this.game.ground.body.immovable = true;
this.game.ground.body.allowGravity = false;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this._loadLevel(this.game.cache.getJSON('level:1'));
};
PlayState.update = function () {
this.physics.arcade.collide(this.player, this.game.ground);
};
PlayState._loadLevel = function (data) {
this._spawnPlayer({player: data.player});
const GRAVITY = 1200;
this.game.physics.arcade.gravity.y = GRAVITY;
};
PlayState._spawnPlayer = function (data) {
this.player = new Hero(this.game, data.player.x, data.player.y);
this.game.add.existing(this.player);
this.game.camera.follow(this.player,
Phaser.Camera.FOLLOW_PLATFORMER);
};
window.onload = function () {
let game = new Phaser.Game(866, 520, Phaser.CANVAS, 'game');
game.state.add('play', PlayState);
game.state.start('play');
};
I have tried the following solution (see below) where I create a constructor function for the background. This idea is from an existing tutorial done in TypeScript that does exactly what I am looking for. However, I am not familiar with TypeScript so I have just tried to interpret the code from the tutorial as best I can and put it into Javascript but at the moment I am getting the error TypeError: "a is undefined"in the console. I am still learning Javascript and I can't see where I am going wrong. (I have included the keyboard logic and the character movement this time for clarity.)
function MyBackground(game, x, y) {
Phaser.Sprite.call(this, game, x, y, 'background');
}
MyBackground.prototype = Object.create(Phaser.Sprite.prototype);
MyBackground.prototype.constructor = MyScene;
MyBackground.prototype.repeatScene = function () {
this.nextFrame = new Phaser.Sprite(this.game, this.width, 0, "background", 0);
this.game.add.existing(this.nextFrame);
};
function Hero(game, x, y) {
Phaser.Sprite.call(this, game, x, y, 'player');
this.anchor.set(0.5, 0.5);
this.game.physics.enable(this);
this.body.collideWorldBounds = false;
this.animations.add('stop', [0]);
this.animations.add('run', [1, 2, 3, 4, 5], 14, true); // 14fps looped
this.animations.add('jump', [6]);
this.animations.add('fall', [7]);
this.animations.add('die', [8, 9, 8, 9, 8, 9, 8, 9], 12); // 12fps no loop
}
Hero.prototype = Object.create(Phaser.Sprite.prototype);
Hero.prototype.constructor = Hero;
Hero.prototype.move = function (direction) {
const SPEED = 200;
this.body.velocity.x = direction * SPEED;
// update image flipping & animations
if (this.body.velocity.x < 0) {
this.scale.x = -1;
}
else if (this.body.velocity.x > 0) {
this.scale.x = 1;
}
};
Hero.prototype.jump = function () {
const JUMP_SPEED = 600;
let canJump = this.body.touching.down;
if (canJump) {
this.body.velocity.y = -JUMP_SPEED;
}
return canJump;
};
Hero.prototype.bounce = function () {
const BOUNCE_SPEED = 200;
this.body.velocity.y = -BOUNCE_SPEED;
};
Hero.prototype.update = function () {
// update sprite animation, if it needs changing
let animationName = this._getAnimationName();
if (this.animations.name !== animationName) {
this.animations.play(animationName);
}
};
Hero.prototype.die = function () {
this.alive = false;
this.body.enable = false;
this.animations.play('die').onComplete.addOnce(function () {
this.kill();
}, this);
};
Hero.prototype._getAnimationName = function () {
let name = 'stop'; // default animation
if (!this.alive) {
name = 'die';
}
else if (this.body.velocity.y > 0 && !this.body.touching.down) {
name = 'fall';
}
else if (this.body.velocity.y < 0) {
name = 'jump';
}
else if (this.body.velocity.x !== 0 && this.body.touching.down ) {
name = 'run';
}
return name;
PlayState = {};
PlayState.init = function () {
this.game.renderer.renderSession.roundPixels = true;
this.keys = this.game.input.keyboard.addKeys({
left: Phaser.KeyCode.LEFT,
right: Phaser.KeyCode.RIGHT,
up: Phaser.KeyCode.UP
};
PlayState.preload = function () {
this.game.load.json('level:1', 'data/level01.json');
this.game.load.image('ground', 'images/ground.png'); // I need this to repeat infinitely
this.game.load.image('background', 'images/background.png'); // I need this to repeat infinitely
this.game.load.spritesheet('player', 'images/player.png', 64, 64);
};
PlayState.create = function () {
this.background = new MyBackground(this.game, 0, 0);
this.game.add.existing(this.MyBackground);
this.game.physics.arcade.enable(this.game.ground);
this.game.ground.body.immovable = true;
this.game.ground.body.allowGravity = false;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this._loadLevel(this.game.cache.getJSON('level:1'));
this.game.world.setBounds(0, 0, this.MyBackground.width * 2, 800);
};
PlayState.update = function () {
var backgroundWidth = this.game.stage.getChildAt(0).getBounds().width; //getChildAt(0) because the background is created first in create
if (this.x > backgroundWidth * .75) {
this.x = backgroundWidth * .25;
repeatScene();
};
this._handleInput();
this.physics.arcade.collide(this.player, this.game.ground);
};
PlayState._handleInput = function () {
if (this.keys.up.isDown) {
this.player.jump();
} else if (this.keys.right.isDown) { // move hero right
this.player.move(1);
} else if (this.keys.left.isDown) { // move hero left
this.player.move(-1);
} else { // stop
this.player.move(0);
}
};
PlayState._loadLevel = function (data) {
this._spawnPlayer({player: data.player});
const GRAVITY = 1200;
this.game.physics.arcade.gravity.y = GRAVITY;
};
PlayState._spawnPlayer = function (data) {
this.player = new Hero(this.game, data.player.x, data.player.y);
this.game.add.existing(this.player);
this.game.camera.follow(this.player, Phaser.Camera.FOLLOW_PLATFORMER);
};
window.onload = function () {
let game = new Phaser.Game(866, 520, Phaser.CANVAS, 'game');
game.state.add('play', PlayState);
game.state.start('play');
};
I'm referring to the official example on Phaser.io site, but have copied it here for reference below. What I want, and repeatedly fail to achieve is that the moving (with keyboard keys) starfield sprite would not collide with other vegies sprites.
I did go through the docs and looked here on SO and their forum, and it seems that the solutions should be easy enough; to just put the following code in the update() function:
game.world.bringToTop(sprite);
But, for some reason this is not working for me, so please tell me what I'm doing wrong.
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/skies/sky4.png');
game.load.image('starfield', 'assets/misc/starfield.jpg');
game.load.spritesheet('veggies', 'assets/sprites/fruitnveg64wh37.png', 64, 64);
}
var sprite;
var cursors;
var veggies;
function create() {
game.add.image(0, 0, 'sky');
// Enable p2 physics
game.physics.startSystem(Phaser.Physics.P2JS);
// Make things a bit more bouncey
game.physics.p2.defaultRestitution = 0.8;
// Add a sprite
sprite = game.add.tileSprite(300, 450, 200, 50, 'starfield');
// Enable if for physics. This creates a default rectangular body.
game.physics.p2.enable(sprite);
veggies = game.add.group();
veggies.enableBody = true;
veggies.physicsBodyType = Phaser.Physics.P2JS;
var vegFrames = [ 1, 3, 4, 8 ];
for (var i = 0; i < 10; i++)
{
var veg = veggies.create(game.world.randomX, game.world.randomY, 'veggies', game.rnd.pick(vegFrames));
veg.body.setCircle(26);
}
text = game.add.text(20, 20, 'move with arrow keys', { fill: '#ffffff' });
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sprite.body.setZeroVelocity();
game.world.bringToTop(veggies);
if (cursors.left.isDown)
{
sprite.body.moveLeft(400);
sprite.tilePosition.x -= 8;
}
else if (cursors.right.isDown)
{
sprite.body.moveRight(400);
sprite.tilePosition.x += 8;
}
if (cursors.up.isDown)
{
sprite.body.moveUp(400);
sprite.tilePosition.y -= 8;
}
else if (cursors.down.isDown)
{
sprite.body.moveDown(400);
sprite.tilePosition.y += 8;
}
}
edit: Solution which worked in the end thanks to SirSandman's answer:
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('stars', 'assets/misc/starfield.jpg');
game.load.spritesheet('ship', 'assets/sprites/humstar.png', 32, 32);
game.load.image('panda', 'assets/sprites/spinObj_01.png');
game.load.image('sweet', 'assets/sprites/spinObj_06.png');
}
var ship;
var starfield;
var cursors;
function create() {
// Enable P2
game.physics.startSystem(Phaser.Physics.P2JS);
// Turn on impact events for the world, without this we get no collision callbacks
game.physics.p2.setImpactEvents(true);
game.physics.p2.restitution = 0.8;
// Create our collision groups. One for the player, one for the pandas
var playerCollisionGroup = game.physics.p2.createCollisionGroup();
var pandaCollisionGroup = game.physics.p2.createCollisionGroup();
// This part is vital if you want the objects with their own collision groups to still collide with the world bounds
// (which we do) - what this does is adjust the bounds to use its own collision group.
game.physics.p2.updateBoundsCollisionGroup();
starfield = game.add.tileSprite(0, 0, 800, 600, 'stars');
starfield.fixedToCamera = true;
var pandas = game.add.group();
pandas.enableBody = true;
pandas.physicsBodyType = Phaser.Physics.P2JS;
for (var i = 0; i < 4; i++)
{
var panda = pandas.create(game.world.randomX, game.world.randomY, 'panda');
panda.body.setRectangle(40, 40);
// Tell the panda to use the pandaCollisionGroup
panda.body.setCollisionGroup(pandaCollisionGroup);
// Pandas will collide against themselves and the player
// If you don't set this they'll not collide with anything.
// The first parameter is either an array or a single collision group.
panda.body.collides(pandaCollisionGroup);
panda.body.velocity.x = 500;
panda.body.velocity.y = 500;
}
// Create our ship sprite
ship = game.add.sprite(200, 200, 'ship');
ship.scale.set(2);
ship.smoothed = false;
ship.animations.add('fly', [0,1,2,3,4,5], 10, true);
ship.play('fly');
game.physics.p2.enable(ship, false);
ship.body.setCircle(28);
ship.body.fixedRotation = true;
// Set the ships collision group
ship.body.setCollisionGroup(playerCollisionGroup);
// The ship will collide with the pandas, and when it strikes one the hitPanda callback will fire, causing it to alpha out a bit
// When pandas collide with each other, nothing happens to them.
game.camera.follow(ship);
cursors = game.input.keyboard.createCursorKeys();
}
function hitPanda(body1, body2) {
// body1 is the space ship (as it's the body that owns the callback)
// body2 is the body it impacted with, in this case our panda
// As body2 is a Phaser.Physics.P2.Body object, you access its own (the sprite) via the sprite property:
body2.sprite.alpha -= 0.1;
}
function update() {
ship.body.setZeroVelocity();
if (cursors.left.isDown)
{
ship.body.moveLeft(200);
}
else if (cursors.right.isDown)
{
ship.body.moveRight(200);
}
if (cursors.up.isDown)
{
ship.body.moveUp(200);
}
else if (cursors.down.isDown)
{
ship.body.moveDown(200);
}
if (!game.camera.atLimit.x)
{
starfield.tilePosition.x += (ship.body.velocity.x * 16) * game.time.physicsElapsed;
}
if (!game.camera.atLimit.y)
{
starfield.tilePosition.y += (ship.body.velocity.y * 16) * game.time.physicsElapsed;
}
}
function render() {
game.debug.text('Collide with the Pandas!', 32, 32);
}
I P2 you have to set the Collisiongroups in contrast to arcarde.
I think you have to set a collisiongroup for the sprite like that:
var veggCollisionGroup = game.physics.p2.createCollisionGroup();
and then define with which other groups this group shell collide like that in the Loop:
veggies.body.setCollisionGroup(veggCollisionGroup);
veggies.body.collides(veggCollisionGroup);
And then the your tilesprite should collide with your other tilesprites.
Source:
http://phaser.io/examples/v2/p2-physics/collision-groups
if i should be wrong you will find your answer in the examples. :)
I have a dimple graph with th ecode
var svg = dimple.newSvg("#chartContainer", 800, 600);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(120, 30, 750, 550);
var x = myChart.addCategoryAxis("x", "time");
x.showGridlines = true;
x.addOrderRule("time");
var y = myChart.addMeasureAxis("y", "height", null);
//.overrideMax=(max);
y.overrideMin = 0;
y.overrideMax = 1000;
y.tickFormat = "d";
var s = myChart.addSeries("row", dimple.plot.line);
s.lineWeight = 1;
s.lineMarkers = true;
s.addOrderRule(function(n){
console.log('n:', n);
return n.row;
});
myChart.addLegend(0, 0, 900, 100, "left", s);
myChart.draw();
and the legend order is wonky.
the data is in the form
[
},
{
"row": "1",
"height": -1,
"time": 607
},
{
"row": "1",
"height": -11,
"time": 709
},
{
"row": "1",
"height": -22,
"time": 809
},
{
"row": "1",
"height": -32,
"time": 910
},
{
"row": "1",
"height": -42,
"time": 1011
},
{
"row": "1",
"height": -52,
"time": 1113...
].
I'd like the row series to be in order in the legend.
Thanks.
Another, possibly less fragile way of overriding the _getEntries method leverages the original method using function.apply()
// first, store a copy of the original _getEntries method.
legend._getEntries_old = legend._getEntries;
// now override the method
legend._getEntries = function()
{
// but call the original version,
// then sort the returned array before returning it.
return legend._getEntries_old.apply(this, arguments).reverse();
}
Incidentally: Thanks, Dave, for your original answer - it was driving me crazy that the legend in an area chart was reversed from the stacking order of the area shapes.
I thought I had put legend ordering in dimple but it turns out I didn't, oops! I'm afraid the only option here is to override the _getEntries method on your legend. The method is supposed to be internal to dimple but it's only used in legend drawing. You can override it like this:
myLegend._getEntries = function () {
var entries = [];
if (this.series) {
this.series.forEach(function (series) {
var data = series._positionData;
data.forEach(function (row) {
var index = -1,
j,
field = ((series.plot.grouped && !series.x._hasCategories() && !series.y._hasCategories() && row.aggField.length < 2 ? "All" : row.aggField.slice(-1)[0]));
for (j = 0; j < entries.length; j += 1) {
if (entries[j].key === field) {
index = j;
break;
}
}
if (index === -1 && series.chart._assignedColors[field]) {
entries.push({
key: field,
fill: series.chart._assignedColors[field].fill,
stroke: series.chart._assignedColors[field].stroke,
opacity: series.chart._assignedColors[field].opacity,
series: series,
aggField: row.aggField
});
index = entries.length - 1;
}
});
}, this);
}
// PUT YOUR SORTING LOGIC HERE
// For example to sort numeric values ascending
entries.sort(function (a, b) { return parseFloat(a.key) - parseFloat(b.key); });
return entries;
};
Here's an example before: http://jsbin.com/dezaq/1/edit?js,output
And here's one with the fix above: http://jsbin.com/dezaq/2/edit?js,output
If you want a fix which is simpler to read, but is specific to your instance of the chart, you can hard code the response:
myLegend._getEntries = function () {
var orderedValues = ["1", "2", "3"];
var entries = [];
orderedValues.forEach(function (v) {
entries.push(
{
key: v,
fill: myChart.getColor(v).fill,
stroke: myChart.getColor(v).stroke,
opacity: myChart.getColor(v).opacity,
series: s,
aggField: [v]
}
);
}, this);
return entries;
};
Here is that one in action: http://jsbin.com/dezaq/4/edit?js,output
I have a jsfiddle set up because there is a decent amount of code but I will also cp it here.
But first the problem. I would like to send the Shape object to the server for processing on mouseup. The problem I am having is when I add the jQuery ajax or load functions to test the AJAX I get some sort of run away code and everything freezes.
first the code I add so you can try it in the jsfiddle
$('body').load('index.php/main/add_shape', shape, function () { shape.points["x"]});
Now for the code on the js fiddle for the sake of being able to look at it here and Indexing.
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>
Google Chrome<br>
Firefox<br>
Safari<br>
Opera
</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;
}
};
}
As you can see when you add the jQuery load line to the tool.up it freezes.
if you have a nice new browser ...
tool.up = function (e) {
if (tool.started) {
tool.started = false;
alert(JSON.stringify(shape));
}
};
(or you can steal json code from json.org) then you just have to parse the json serverside
The answer was the object was an infinite loop because of this line
shape = new Shape (pencil, c.strokeStyle, null, null, null, e._x, e._y);
needed to be
shape = new Shape ('pencil', c.strokeStyle, null, null, null, e._x, e._y);