I'm trying to create a coloring game for kids using animate cc. I used the following code:
var drawingCanvas;
var oldPt;
var oldMidPt;
var color;
var stroke = 50;
var index;
var that = this;
this.colorArray = ["#FF0000", "#009900", "#FFFF00", "#0000FF", "#000000", "#FF00FF"];
function init() {
index = 0;
createjs.Touch.enable(stage);
drawingCanvas = new createjs.Shape();
stage.addEventListener("stagemousedown", handleMouseDown);
stage.addEventListener("stagemouseup", handleMouseUp);
that.obj1.addChild(drawingCanvas);
//that.obj1.update();
}
function handleMouseDown(event) {
color = that.colorArray[(index++) % that.colorArray.length];
oldPt = that.obj1.globalToLocal(stage.mouseX, stage.mouseY);
oldMidPt = oldPt.clone();
stage.addEventListener("stagemousemove", handleMouseMove);
}
function handleMouseMove(event) {
var midPt = that.obj1.globalToLocal(stage.mouseX, stage.mouseY);
drawingCanvas.graphics.setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x,
oldMidPt.y);
oldPt.x = midPt.x;
oldPt.y = midPt.y;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
//stage.update();
}
function handleMouseUp(event) {
stage.removeEventListener("stagemousemove", handleMouseMove);
}
init();
There is a movieclip where color will be applied and another movie clip above that which is just outline of the object. My question is, is it possible to check if the object is fully colored? Or is there any way to get the shape's color?
Related
I'm making a drawing program, and it includes a tool that will change the color. It works using two lists, one that has the names of the CSS colors that I chose to represent he colors of the rainbow and black, and the other for the element that displays which color is selected, then I use a function that increments the value of a variable called selector, and and it all works mostly well. The text changes, but the color of the drawing doesn't. I have tried using the array that I'm putting in the fillStyle element in the innerText to see if that array is actually changing, and it is, the fillStyle just isn't changing. Any idea what's wrong? This is my code.
<canvas id='dr' width = '640' height = '480' style = 'display: block;' ></canvas>
<p id = 'color'></p>
<script>
var canvas = document.getElementById('dr');
var ctx = canvas.getContext('2d');
var line = false
function drawType(){
if (line === true){
line = false;}
else{line = true;}
}
var drawing = false;
function Type(){}
//start the drawing if the mouse is down
canvas.addEventListener('mousedown', () => {
drawing = true;
})
//stop the drawing if the mouse is up
canvas.addEventListener('mouseup', () => {
drawing = false;
});
//add an event listener to the canvas for when the user moves the mouse over it and the mouse is down
var colors = ['DarkRed', 'DarkOrange', 'Gold', 'Green', 'MediumBlue', 'Indigo', 'Violet', 'Black']
var displayColors = ['r', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet', 'Black']
var selector = 0
var color = document.getElementById('color')
var selectedColor = colors[selector]
var selectedColor = colors[selector]
function switchColor(){
if (selector < 8)
{selector = selector + 1; }
else{selector = 1;}
color.innerText = displayColors[selector]
selectedColor = colors[selector]
ctx.fillstyle = selectedColor;
}
canvas.addEventListener('mousemove', (event) => {
//if the drawing mode is true (if the mouse button is down)
if (drawing == true) {
//put the rectangle on the canvas at the coordinates of the mouse
ctx.fillRect(event.pageX, event.pageY, 4, 4)
}
}
);
function clean(){
var canvas = document.getElementById('dr');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 640, 480);
}
</script>
<button onclick = 'switchColor()'> Switch drawing color</button>
var canvas = document.getElementById('dr');
var ctx = canvas.getContext('2d');
var line = false
function drawType() {
if (line === true) {
line = false;
} else {
line = true;
}
}
var drawing = false;
function Type() {}
//start the drawing if the mouse is down
canvas.addEventListener('mousedown', () => {
drawing = true;
})
//stop the drawing if the mouse is up
canvas.addEventListener('mouseup', () => {
drawing = false;
});
//add an event listener to the canvas for when the user moves the mouse over it and the mouse is down
var colors = ['DarkRed', 'DarkOrange', 'Gold', 'Green', 'MediumBlue', 'Indigo', 'Violet', 'Black']
var displayColors = ['r', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet', 'Black']
var selector = 0
var color = document.getElementById('color')
var selectedColor = colors[selector];
function switchColor() {
if (selector < 8) {
selector = selector + 1;
} else {
selector = 1;
}
color.innerText = displayColors[selector];
selectedColor = colors[selector];
ctx.fillStyle = colors[selector-1];
}
canvas.addEventListener('mousemove', (event) => {
//if the drawing mode is true (if the mouse button is down)
if (drawing == true) {
//put the rectangle on the canvas at the coordinates of the mouse
ctx.fillRect(event.pageX, event.pageY, 4, 4)
}
});
function clean() {
var canvas = document.getElementById('dr');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 640, 480);
}
<canvas id='dr' width='640' height='480' style='display: block;'></canvas>
<p id='color'></p>
<button onclick='switchColor()'> Switch drawing color</button>
I am building a tower defence game and I am facing an issue in Phaser with tiled maps.
You see different layers in tiled always have coordinates from (0,0) to (600,600) -> or whatever your tiled width and height is. I have a backgroundLayer and a path. The creeps properly collide with the path.
Now I am trying to change the cursor to a building sprite (for UI when I click on some button and select a tower I want it to turn red when it is on the road or above another tower/creep) and I am using an overlap function for path and buildings.
This overlap function in Phaser checks the rectangle of building sprite and path, but path rectangle is the whole map. The collision works but I only need an overlap. Any ideas how to achieve this? Here is my code.
var RedPlanetGame = RedPlanetGame || {};
var pressed = {
is: false
};
var buildingOverlaps = {
is: false
};
//title screen
RedPlanetGame.Game = function () {
};
RedPlanetGame.Game.prototype = {
create: function create() {
//A door for multyplayer
this.players = [];
this.player = new Player(1, 'Daniel', 300);
this.players.push(this.player);
this.playerInfo = {};
//Tile map
this.map = this.game.add.tilemap('sample2');
this.map.addTilesetImage('32x32_map_tile v3.1 [MARGINLESS]', 'gameTiles');
//background and layers
this.backgroundlayer = this.map.createLayer('backgroundLayer');
this.path = this.map.createLayer('path');
this.map.setCollisionBetween(1, 2000, true, 'backgroundLayer');
this.map.setCollisionBetween(1, 2000, true, 'path');
//objects from tile map
this.spawnCreepsAt = this.map.objects['objectsLayer'][0];
this.destinationForCreeps = this.map.objects['objectsLayer'][1];
//resize world
this.backgroundlayer.resizeWorld();
//this.game.world.setBounds(0, 0, 100, 100);
//groups
this.game.enemies = new UnitsPoolFactory(this.game);
this.game.buildings = this.game.add.group();//TODO: make buildings for each player
this.game.bullets = new BulletsPoolFactory(this.game);
//creep spawning
var _this = this;
const creepYOffset = 15;
setInterval(function () {
_this.game.enemies.factory(_this.spawnCreepsAt.x, _this.spawnCreepsAt.y + creepYOffset, UNIT_TYPES.CREEP1);
}, 1000);
//text and player info
var textX = 150;
var textY = 0;
this.playerInfo.gold = this.game.add.text(textX, textY, 'Player gold: ' + this.player.gold,
{font: "24px Arial", fill: '#FFD700'}
);
//Here is test straight forward code for building towers
this.game.build = this.game.add.group();
this.buildingSprite = this.game.add.sprite(0, 0, 'tower1-1');
this.game.physics.enable(this.buildingSprite, Phaser.Physics.ARCADE);
this.buildingSprite.anchor.setTo(0.5);
this.buildingSprite.scale.setTo(0.5);
this.game.build.add(this.buildingSprite);
console.log(this.path.getBounds());
console.log(this.backgroundlayer.getBounds());
},
update: function update() {
var _this = this;
//Camera follow cursor
if (this.game.input.mousePointer.x > gameHeight - gameHeight / 10) {
this.game.camera.x += 10;
} else if (this.game.input.mousePointer.x <= 100) {
this.game.camera.x -= 10;
}
if (this.game.input.mousePointer.y > gameWidth - gameWidth / 10) {
this.game.camera.y += 10;
} else if (this.game.input.mousePointer.y <= 100) {
this.game.camera.y -= 10;
}
//check for collision between enemy and non-path layer
this.game.physics.arcade.collide(this.game.enemies, this.backgroundlayer);
//checks for collision between bullets and enemies
this.game.physics.arcade.overlap(this.game.bullets, this.game.enemies, function (bullet, enemy) {
enemy.takeHit(bullet, _this.player);
bullet.kill();
}, null, this);
//updates enemies
this.game.enemies.forEach(function (enemy) {
enemy.onUpdate(_this.destinationForCreeps);
});
//updates buildings
this.game.buildings.forEach(function (building) {
building.onUpdate(_this.game.bullets);
});
//on mouse down event
if (this.game.input.activePointer.leftButton.isDown && !pressed.is) {//yo Yoda
//builds new building of type TOWER1
buffer(pressed, 1000);
if (Building.prototype.canBuild(this.player.gold, Tower1.prototype.moneyCost)) {
var poss = this.game.input.mousePointer;
BuildingsFactory(this.game, poss.x, poss.y, this.player, BUILDING_TYPES.TOWER1);
this.player.gold -= Tower1.prototype.moneyCost
} else {
alert('Not enought gold');
}
}
//Here is test straight forward code for building towers
if (Phaser.Rectangle.contains(this.buildingSprite.body, this.game.input.x, this.game.input.y)) {
this.buildingSprite.body.velocity.setTo(0, 0);
}
else {
this.game.physics.arcade.moveToPointer(this.buildingSprite, 700);
}
this.game.physics.arcade.collideGroupVsTilemapLayer(this.game.build, this.path, function (sprite) {
if (!buildingOverlaps.is) {
buffer(buildingOverlaps, 500);
console.log('overlap')
}
}, null, this, true);
},
render: function render() {
this.playerInfo.gold.text = 'Player gold: ' + this.player.gold;
}
};
Hi I'm trying to make a basic lightning system using bitmap multiply in PhaserJS. How ever I'm having trouble with the fact that the bitmap does not darken my sprites. How would I achieve this?
I create the bitmap like so in the games create function.
// Shadow
this.bitmap = this.game.add.bitmapData(
this.game.width+100,
this.game.height+100
);
this.lightBitmap = this.game.add.image(0, 0, this.bitmap);
this.lightBitmap.blendMode = Phaser.blendModes.MULTIPLY;
I then fill it and paint it every frame in the update function.
this.bitmap.fill(20, 20, 20, 1);
this.lightBitmap.x = this.camera.x-50;
this.lightBitmap.y = this.camera.y-50;
this.bitmap.dirty = true;
Here is an image that shows what happens. I painted the shadow on half screen only to illustrate that it does not darken the sprites. The dirt tiles and the purple player are the sprites I want it to affect.
How can I make it darken the sprites as well?
That's probably because of the order you are adding your images. You should add the shadow as the last one if you want to affect to all your elements. Or you can always use bringToTop method.
Take a look at this example:
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game');
var mainState = {
preload:function(){
var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAJdEVYdFRpdGxlAENhcobOmFIAAAALdEVYdEF1dGhvcgBMb3Jpw/Hj0QAAAB90RVh0RGVzY3JpcHRpb24Ac2lkZS12aWV3IG9mIGEgY2FyIB3sOscAAB2qSURBVHic7Zx5mB1Vteh/a++qOnX69Dyk6XRIQiAQBgljLnIJIOhTQHB4gID4QMWrXn1ehw9HvE+v914VfQ6fT5wuguJ4H6iIEzKIDBoZboAECCQk6czpeTp9hqq99/uj6nSf7nQnYQr9va/X962v6uxTw671q73X2mvvc8Q5x5zMHlEvdwXmZLLMAZllMgdklskckFkmc0BmmcwBmWUyB2SWyRyQWSZzQGaZzAGZZTIHZJbJHJBZJnNAZpnMAZllMgdklskckFkmc0BmmcwBmWUyB2SWyRyQWSbey12BSSIi1Z+mbJ+vzLSKY6J8Fq30ePmBTECQVNWUbbVSdex0RnQz7E8tc1VqEZn4/DLDeXmBJDAUoFP1bofsv8Bx2+EYBaECT5LvlEvqq9J97UAcKJt8VjYBFXswpqHgQyGAsUy6DaGQg7EayDdCvhXyR8LwW2EUiAGDiOXlBOOce3k0NbCDmrfBMQfBV2rgEYESk9/gl1pNHdxxNFzyDNQ7CNK6ycthF3lZXoSkZehlsGIbfHIMXueSVoCCqBXWL4UnlsEOH1SqngcqAC8A3wdPg1YgAs6BcVA2UCpCNAKMglcArwhBAYI8hMUq7YemHlhswAfIwOOnwDvvgceBGOfsATfNywRE5eCDBfi8g6AOtq8UeeQc2HqZyOZmkWGMKZO8wZrEYBkgC9QCjSjVhHN1QJhetYRzg0AfMADkgYgJv1HpHquv5Rcgvgly34SjHoezBYr18OFB+B5gD3TXdeCBiIiG71q4CiCAwaeD4AuLnWsDMj+1NvduY97koCwQaYg8KAdgQjCdMPoxkfXniYSIzMe5JhJoeZzb8c+Qfdw5BkVsHnQJfAs6A1EW4jqcWe4Y/hj0NEEDiV8aBJ59te8ddXcUX+5AByKfKDn3xQPuSw50H6ngYsApkUHANYtsdrncF1wu9xOXzf744573G8BllerLKNXnKzWoRYpM6fuv0/p3zvfvcUGw3gXBVuf7a53n3ZqFwtRjp9Mz4FEHP3Vwu4NfFJX6Ukap/Feufv/1dbmaLsBpkX880PY5oFGWiHQA3wJ4+5WXPX39DT9ekRMpEQQNQB3WFgat9YhjfvrT76xrWNBxsBNx4ugd6B9kx9ZtbvOTTw9959s/XPy/jFnxzkzmgUCkDecyJJFR0Rnj2nPZra961cqtzR3tqqm5Iaqrq7WlcqTiQonR7p78j/7z1mP+PFZYfhtsOh8M4G33vLr2TNB70uvOOurnZ5+27vLL3jvS3z/wZRH5o3Nuw4Gy0YEOe78HNHd2dqy64JILVlx/w4+pUapMJhMCPs4VBkqlxME2NbY5pToRJQ5o7Zjn2joOcq84fnn/g/c9uOXex9Ye/4TvR8crVQSyOGeASIpFN799Xv+7P/q+Buf7nYASQJQSQSzG9LU0Nay55qvfWfA3keD8tEXtytX4S9tb+03gd4Q14RFf/9a1f7nyre/pdNZ9Hzj9QBnogKVORORK4DwRGfj2jd88DEsRIKdUiUzGIwyFbNYOiSRAasIgjcbE8zzJ+KEK/EArzwtPXnFcL8AOrR2ZTIlMxhCGljC0iLjIOo3WORIfUS9K1Xvar/M8v0E8r61t8cEhQI+IQqmC1VLalcn48zs7YpSEiNR3LlpwzEWXvPkOa+1Kz/POOlB2OiBAROQI4FqAj3z8gxs7OjpaC4XCKECD55XIZhMgYWhHRDJKJFJa+4BopQgzWTKZEKUU1lmda2z0AHZprchmY8LQksk4MhkAF8WxIo2uRATfC8gEIZ72AFSM8gD6wUfrCK2jXvCcSoNoUCKq/d3vu6o9k8l0A588EHaCAwBERA4H/gS0HXfCsX+98h1XnOico5gCaQqCMpmMXwEy6lzgKVV2DiUiZIKQbKYGrTysc1hnxQ/DEKBXxE9bhiObhTBEgMjE2oETBE97ZIIQ3wsAwVqHsUYDlEQUnmfQvhlw1nPWWZxzIoKnVZCrzS294E2vX2OMOTsMw79/qW0FLzEQEVlKAqMjl6tZd+OPvn8yQKlcZKC7Nw/QEgQx2axPJqPIZOwYhL6niwhopQmCDL7nY60hjsvgED8TaIA+kQyZzETrCAIRERtFRgtYUYLvZwj8DCKCsTFgXWyS8Z6vlMH3wfddv3X+4Oioh4gVEbT2VeBlWq7+xEfqgsAfjKLo25J2py+lvDhARGSqZiZgzA+CYMvPfvmT5my2xisU85SjEuvXrhsAaKupiQhDn2xWEYZuzLkw8PyyiCjP81GiieKIUrlIFEWAc6IwAGMiHmFIpXUQhngikbFGAU4pja99RIQoLhPHEc45Vy4WYwBPKUsQoDxPRozJbN65u0EsRhC09tBK+7lc7cKr3v3O+6y1xyilPvai2Gsv8vyBJIZXXHyx5swzNf/wDx4XXeS/paOjJaPUNWVYBXS2trasvvWPN7csWnTwvPzYCKNjIwCsf/KZAsArGhsLZLMZwlBTU0PB2pog8MsgIqKw1lAsjlEsFbFpJqOQL1oA5XkTrSOTEcJQfKUiY6xWoq1WehxGOSphrAGIB/oHLUCgtSEIFJmMGjEm2N7b3yziIqU0SgRjjZTKxeb/cdWlHR2dB/2XtfaaTCZzxAsx+L7kuQGptIDPflZx5pmac87xKRYzZLM1H/j97w+dd+utn7t55871ZWv/BWg+6eTj7v35r3+4vKmpMVcqlxgdGx4f+D7x5DMdAu41nZ0FstmQbNYnm/VK1mbDTBA755S1llJUolguEJsYAOdw27fv9AE8z4MwFDIZqUAJlCrH1monDhEhtjGlUpEoKldON/19AwIQau3wPA/f95tElQbHCo1jo4UiYK1zRCaiWCoEpXLp8Gu/9m89WmtjTHz9iSL+pB7hRZT9H4eICBddpNi4UXH77R65XPC2Rx89/IHBwQu6y+Vz88YcRwo4UKr7nVddvuHid1y20uHEGEOpXMKkRn3ywdUP7BgaOvWgMOxpaWioxbkcAErlHOj6mppYOVswcXkkBrHWCA5BEBGX37F1exIaB4EiDD2sVYDCOZ3ROioYkxPnrHPGRZEjjuO0dTknjrivp0cDhJ4HmUyAc/p1NTXd3xgclHWr146c9OqVBRNHtTEQmxhjTW3nwvnHffDq993/1S9+44w1Sv3uDdZecisMUz2f8iKkWfYPiIjizDMV27b5t+TzDR9cu/Z/9kXRmwvWLqsc0uT7O/+usXH1FYsWPXLdpk3H33nLb9ufWb3m/nkLF2Tq6moLxVKJkcEh2bB+U/0Tz246BeDfV6z4L8KwDajHOYvWza9buPDZVf1986791Od3i+/3idYumw1trjbncrkaNzw45B5++LF2gGwmExKGPtZ6OOfjXCartemPylpF8W4jOrQ4hbOqkk3Wxu7asH5TLcA837f4fhbn/NfU1/dmdu0qPvrAqrETzjhll9V2ocP5zjlwCNBy3gWvPSILv/78td849/fw57fBxTdBF0kS01RNdD3vWch9AxFRnHiiBjLLH3/8wnWFwufK1i4AqNV68PTm5jXvX7x48znt7SW0zqDUwosWL+46+a67Dr37odUnuYdW79GkD66t3fFPxx779NuPOSaDc/OAOkQsSrXdfO65XV987LHdn/jTfa/eW7Vqfb/4hiVLDJlMC9aGWGuBulrfJz862njVZe+ZV1ObG8zlcqXauppyY31DubGxPtqysSv7zKauEwEWZrMaz6vF2sBXqmVJEGy/+Q93n3jUUUfct+KcVw2L7zchEogFxBmJzejKY47S9yxccOcDm7ee/zP489/gq5+Em66EfpJJLkvSamDyDOV+Qdp7tldEOPNMfdkTTyz8dX//9XljzvREisvr6h5/V2fnpqsOPrigtW7G8xpRKodSAVobtB7D9weHnRv5S2+vv25kJNuazRYXNzREhzY1SUdtbQ3QCrQi0gSEKOWAMbTuR6mekTgeiK0djawtF+LY9efz3mCxGBTK5cwhtbV6aV1djWdtO8a0EMch1hZxbuc1q1fLLV1dLT2lYs1QOaqLrQ2mezQF7p6jjrp/ZTbbgHM+xvR9qbvbfGLXrtOMczrQunRIe9vWjnmteZwjKpXo2rG7befI6LwzsuH9zeWo5+Y4vghAQ74FblkB/3EbrJ0EJlFXtd1r9zYzkIrPKBYzDb/73Q+GjbkwVGr4t8uX/+Cs1tZ6ROajVAueV49SNWgd4HkarS1al/G8QqpFlDJoDVprtM4gkkWkBqVqUhgaERCJECkiMoZSeZLZwyh9+x3WCsZorA2I4xzG1GJMNi0rY+0Q1vZibQ/GDGFMoa9QoLdQUH2Fgh4sFPycCIf4vnQqVa+NaSeOm7HWw5hRjNn9UD4/8tuhIW9jFAXdzmZHrA0LxgbaOY4QBt+l9NYzrM1jTPRtYxo/G8ev3AWdFbN5MBDA5gx0BbAtgF0B7MjAjivhkasTv2OYYa5l70DOOSc498EHj/9DX98DnkjxZ0cf/aM3t7c3o9QitG5F61q0DtHaS2EISeRi8bwYpWI8L8bzHEqB5wlKeSilUcpPt0lsqjWIWEQMIiZ9y5JZO+cc1pKqYK3GGI849rFWE8eCtQZjSlg7RhwXsLZIHEcYYzDGEseWOAZjhCgKiOMajKklimowRhHHZawdTUGOEEVjGFMmikx6jk8chxhTQxx7GBNjzLC1tvtz1jb+zLlDN8LB5YkJs+la5VAd/PC78OmLkwk0MxXK9EAqrWNoKGy8++6fD8XxedcsWvTDzx16qIfWRyDSgefVoXWA1hrPU2gteB5oDZ7nxlVrm0y+qnQSVglaqxSeVMEArV16f5e+QRMTNhUgxsg0CsY4jLEYExPHpgqEG98mQCCOdap+alwhiizGRBhTIk5HkXFs0vMr53jpOSq9fgFrhzFmEBjAuaF1YFdB+Djknob6LdDYD7lBaBqDZoBa+PXDcPkRSaZ5EpSZnfrGjepfu7vnDcXxuYFS+U8uWjQEHAu0oVQ9Ikm2TylJjVyBwXhLUYq0FTD+ffUx1eXJsZJ2XQko56hqGYkxK+cYA1FUOR6qlxElD+hwDpSqbCf2K9ev1N9aUErhXNIdJq3UoZQdv37leBE17rBFciQBSTPOFYDCskSLJDoE7AZGIxh4KxxxC7x2FC44A67ZBZ9JrzPefc0ERKir07dv2PAKQJbncmuzWreiVAsitSgVjHc1yYNOpzIJwmQYE9vJQBKtGLgaiDGMG8eYZFmDl1bfueQazgnOJXWy1iFCuk+VYSfuY61MMriISw2uqYz3ktZaAV45rlLukczRZ6l0sYlGVftlkiVJA/8J226D694Cl/fCu2+Ar78dekkcPjDTSP2ii4S6OrU7io4FeHNr60acawRyQADoqortXWcGNqEVQDPpTOCm08lv9B45tik6ua5QKVdVqlOtfJ58zMSiiRqSBRgNJF1TK9AOzAcOBg4Blp4PdWfAwwYavgGvIxkfjQ8N9gRSSQX09+uROD4S4IympjFEcjgXAt74MTNlDaYrry6bePv2LJ9soD2Pm7qd7n5Tz99bvV6YVK+2VEy0mIDEuYckoOpIILUDnZcm3Rj9cFJ6vKrYdPoW0tMjZLOqbG27gDkhl4txLotzycnWSupwJ86pfN5XeaUbmuofKt1StU79vqLV15juvs+lLlNlb+OyvZ9fveS1AqiyItNP4dQCTW9JVtEURuHo9LvxN2V6HzIyIgSBjp1rqtV6MAMBzgWp00v66GrjJk5xeiNX+vzp3uzqh7SW8WirsvSt+rsKoGpYzwXeTACfjz43qTywJunachmoPRQ2bIQjmFgeK4CbHkixKNTUaONcY7PvD2JtBvBJ8uGyh8GnOt5qBzxerar96odTaiJ6qvYB07Wq6VpRRSsh7VRAM+3vD8CZIE5Xvm8oUgWlZin0PgWv+BE0X54MFoHpW4hQKgnFoo6ca2zzvM0k6YcJksmIeSZfUD2WmFxpY5KxijGTw94KCKUmw5sOyHStZV9wptPnAmk6QJX96pds31AqfibTnkRf3AELL08SlDITEGhrU4yN6ci5+oM8b4Q4TgaAzk3ubyZ3PxOrvSo5HGttWgbWJoNBaxVKqapBoYzDmNqtVb99MxloX4afGAzODGbq/nTwE3VVYPb0o/uWccffASMA25IobNyXTw+kXJZfjY7WO/AW+f4ocRxgbZIamQplYhBmcS7GuST2di7C86K0PBkgWuunKZOAOK6kUKpDyQkg1Q66AmSqP5hqxP0Bs7f9PdVhrUuv79J7uKpuW8bBVDnmvcj4+uLOZKzCUBIe79WpC1EkD4+MtAAc6nl54rgJrVUKo7ormgChdRkYI8nRjKbbIlpHgKQgsiiVA2rTbRalku6wMnaYCcjUrmuqs9+bw99bdzYdnCTNUknFGJI8WdLiJ0AkI/uJaKryls8EptqPeAtSIEVoGj9HRGZMnWwqFJoAlvn+EHHciHMGpZIsZeUNSYCUsbaAc0M414dzPUPl8tAf+vr8v/T3164ZHm4T4NiWlt6/nzev//ULF0ah51UGTi1APSJZKj5q6pTodKHsdE54X61lurI9YTiMccRxkhMzpoy1RZKkZTLlmTyzIhkChCRjsyTomXjB99ZaFOAtSn1IIRmfVGBN20Icu3ezNYoaAY73/Z1Y24RzwyiVxTlB6yBtqhHW5nGuF+d2PDky0v+B9euX3DswcFaURGbjcveuXXztiSeo9bzhNy5c+Ng3Tznl6XqtO4H5ONeMSA1TYvK9Atlba9lfOHGc7FfDSECUMCaPtSNYO4i1wzg3inOl1C96JOOyeqAx1cpPI3wmwtjJdp2ApRYnaRVKE0CYCQhks2Z3f38DwLOFwsh8pbYiEpJkXVuxthZjFFoX8LxerO364u7dfKqr640meXNmlNE4rv/Rxo0r79y5c8f/PfXUB05rbjZQNZhybvLCgZkGe3vzKTOFu3vzFUmXFGPtGEkKvgdrd/UZ0//JQqHzjjg+Ng+ZonOhBe9o2HQJdL0LdubgIBJtIUkvVaBUw7CQzoOAy4HxoTAVyKT0u4icB1wtsAjocElTdK1ab39tNrvxMy0tg4cFQRsibWjto/UIWnd9dNcu/8u7d7/G7Z9jGxdfqdL9p51264rGxgXAQqxtSsFPfsP2F8pMUdi+W43F2qS1W9uHtTs2xPHuj4yNdd4eRceXkvTHtBJC4Vtw55WJrRYBbSmUystuUo1IuqkRYBvwWANc7GD7MJydlpupQDYBi4Fy4PtPtTbW7673vEKhf6B2Rzk6NSsS/aa9/U8rs9k6lApRauALg4N8orv7vJkqnGTRZw4NF2azWzasXLnKh2VYOx+ROpKV8OP96oxApuu29gZl+hDXYW2EMWNp19v1SLm866x8/rzhJKG6T9EQfwVu/0DSZR1C0lIyJK2hSBLsFNLtMLADeGoeXDoEYQmWk05YjQNJF0Svq6uvu+fnt94oYbbmjHGjOuy6VQ//9R8/9OlXLvP99U92dNyDUtkdzo0u3br18jFr66dCOPuc0zn51BM4+JAFjOXH2PzsFn57yx/ZtKFrjwd6b2fnXdcddpjB2sNwrhUIEdFVISXj4fbzhTJzazFYW8TaPqDrsTjecvrY2LnDzjXvD4yKBFB8CG49NmklC0hS8mWSn9f1AgMWhnqgsBlGt0LPe+DiATjcJN1dEbDVPiQLcPyJyzeH2Zorq2/mBHXEK0/6+/Zczeqn82PH7CgWvz8/COTC7u7XToURZjN85NPvZ8nhi4FkfW5zYzPt7fNYfuIx/OInv+H3v7pj0sN8f+fOUz/a1vbLxZlMPclyHps8Iyo1egXGxHYCiOwBY2qqpRKqTv6cOPGqwKTLue4zC4VzpoNx1PJlHPWKw5m/oIOe7j42rNvIw39dPd76yxBeAic8CWtSW+aA0W3Q/QGYdzcsH05+5btHt/5R8K5NB9bVQB4Ddj+55qmW6d6A3p27V/WOFRZb8D8zMhKOOVe7qlw+Y+pxl77jwnEYnvboaFtAfW0j5ajE7r6d/Pe3ns+GdRtZv+7Z8XNK1mY/uGlT56+WLOnCWgGaqKT6K11XslVUJqEqWp15ruxXj6anT41I2lVZrC2l4fqOT0dR86Bzk54/mw254r2XcvKpJ4yXKaV49bln8MxTp/O9r/+A/t4BAJ6CpbfBw+cnXVItMPg2WHIPHC0Q1ym1oakut6ulpXkkrKstP7jmqZNiaxfcAC3XpvmsqT7kP4ALr3zX224/5/WvWbJ92478/fetKt1zx58P6u8bOJp0sdlM0tTSyJe/87nxz3W5Bg5ZcBgL2heRL4zStWMjm7dvYM3qJ/nav31r0rmByOjaww775lLfbwNacC6XtpZKKluN71dWKk4M0CpgZDzamtifaEET+5K2DpuOobqB9a1xfGFfksoYl3f90xWcsvIkAHwvYF7LQYRBlrFint19O9nw9LN8/lNfJVkYAyfAI48k65rrgP4MvMcX6f/hz767uWnRglOrr33RuZfe39c/eJoHr4ycWwV7hr0fBo678Xs3XXzj927am+2nlUMOWzTpcxLSx8QmpnpKesnSxXs4+7Jztadt3PiG5WHYtcTzSof7ft+RQTDWpJSpUSqZ6RFxNSLUOFdZ2jEZTkUnurFKInTy54kIrQKk9ybn4qkwDj/y0HEYAPW1jbS3dNDc0MbgcB+xibFLDaeddQr33vkXAB6F5Q/CL1ZAvBZsGcJlB3c+1bRowdlT7TVWKI4CxFVR3CQgzrlhEXktcCVwPMkM17PAegVdHvTUQ28dFHbC6UW4ofp8P5g8BBkr5unu302cDnCHRgZwzuL73rTRV7cxy+7I55exn6Ig1mCUiNEQKzCpOplBFThJfpTjJOmzixpGupNwdZIsPfLQSZ+ThTEe9bUNlMoFMn4y9j38yEPHgVjwTocPzYNnTTr4W7tl20n//qnP/2bFaX93cEdnR6mvt3fLY6uf6C8Uihell545/e6c6wP+94xWSAdtQRoEVMvmZ7fscXhP/y6GRgYQEUrl4vhxlSY+RcpSNfOW4qoMGvcQC55N/MyM1Z1R9uOc1nmT3enI6BB9A93EcUypXGSsmAegZcpxJWjdmqSGKvVsuPOue19/5133VopWVB3+EPBM5cNz/xVu+lpHIk+SrGcdj0i6d/awbu16lh2zdNIp5ag06fM9f7x/uitvf29b27LrcrmYclml3cxEdrmxUQaslSFjJG+MyjsnxaEhVXZODWWzMpjPe4PO6WFr/WHQkXPeGHixc7oIXgk8G8e6nPy/io7Ai5Ny6Yf6zfAhAydWV2hr1/ZJFSxFJbbu6qJ/uA9jDCP5IQC2TTlOwbYOuMaAHYaFRVjq4HAHy0iSiaS2+yLwdefcuIGe98+iXdLs7wYurCrj+v9zE5/+wtXUN9ZNe96q+x7mb/c/ske5gg9f19OTp6enEhZODg97e2lKnmbPbEA+P12GYG9Z10mPArgsWAM/qf5i7eqniKMYz58wUxSXGRzun3SB1Q+tmXqPR7bBj6uuP77uSkTqSUL6UedccY/KvZCfNIjIQuARqponQK62houveBMnnXI8YTbpZ/t6+rnt5j9w311/ne5SNzrn3r6vmz3viu6HtEJtH3QzZSnofzv/LN5yxZtmPO/eO//CD77900llAtda+Ph4wXMw8gv+rxMReQ3wB6bp50WEeR1tjI2OMTI8OtMl7gLOdc6VX1BFXgQRkRtIAppJctqrTuEtV76ZmtyE24xjw203/57f/fIOrNnDH17lnLv+edXhxfhvFRF5B/Bd9jFOmUYeAs5yzs1I60CKJD+NWEPVavaKhNkMi5YsZP6Cg+jt7mPThi2MjsxY7WOdc3v0Y/slL9afpgBvZD//+CXV24CWA/3nLvvxHK8mCVf39zmm6o9f0P1f5Ic5GvjBPsBsAN74cht+H8/xhuf4clV0LdD0Qu79kvxfliRrXhcCh6VaBNYBTzvnBl70G74EIiLLgX8G3sTe53kM8CjwJeBml/wJzvO/70sB5P8nEZFFJFmLZcA8ksTh1lS3ADtfKIRJ95sDMrtk7p+tZ5nMAZllMgdklskckFkmc0BmmcwBmWUyB2SWyRyQWSZzQGaZzAGZZTIHZJbJHJBZJnNAZpnMAZllMgdklskckFkmc0BmmcwBmWUyB2SWyRyQWSZzQGaZzAGZZfL/ABQPgU4Ww7kIAAAAAElFTkSuQmCC'
var data = new Image();
data.src = dataURI;
game.cache.addImage('car', dataURI, data);
var dataURI2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAoHSURBVGhD7VgHVFRXGlajLEHjKhEVXOkMMCBlaAIajaxRbHSBUcGGLaKCGGSxYEERhMEuiN1o7BU1gIgFCyKi2PsqdhETTbKrsl/+/82MDDjuWuLZ3XPmO+c797475X3fvf//3/teHQ000EADDTTQQIN3hiFRRNQjNiLWI/5fQJ/Yy8bw89TwrgZHB/oaPZsZ5/hSNsW5YmKU3d+jh4nLhoSJjoT6m+zs3MFgdVtJs3Qby8aTDVpoj6DfSYldiW5ENt+K+GdifeInRwtiN2tDnRmBXzUviAsxfrLyOxscmeuKR9le2CJzw5VDPsCj/sDdMPzrXjhelofh15t9UXlFivtng3HjZCDOHvRFYXY37P2hMzZkdcTSdM+XmakeT+fMcCuPHG5zycqiyfGG2vVymjb8bJz8th8PXaKXmb52go+HXl5MkFHFshgbHJK54OIyD1xd6YnzS91RmuGOaxs6IHOiPQq3dsHTCyF4WNYbj84yg/H4XDCe0FjlpVD8RIaeXe+Dl3fCgKeDgOcReHarH47l9MTSVA8kjrGFbKQVDqQ6Y1p/M9D93QUl74k/ETvq1Kszwd+92Y8TpcYP1sXZ4sQCN9xc0w6317bHlRWeOJPpjuKFbjTuKpD719Z3wMLxbVCw3gtPyoLw4FRgTZYGofJ8MP55ow9+uSbFhUI/bMz6GonjHBAbboGZA82xPs4GxXPlk3Quyx0XqP2rRPcEaXq/XHN1/HLP0P6WiOhtioQIS6RFWiN5iAhzR4iwKNISq2PE2DXFDvuTJThB4VSW4YYLtCJ84wc7OiEz3h4HfvBCZWkA7h73Jfqhgvq/XAxGxZkgFO/uhpUyTyRE2iC2nxlSh1hgx2Q7lC50FUSfzmgrTBqziCbowlIPbJpkB50G9SIVEt8JvrvXeAE/D8JzmrFbJUEoO+CL/Vu9sW1lJ2SleSA5XoJp0XaI6i/C2H7miA41RXSQEaZSCCyKEmOoryGyZrigLLsrbuzvgYdFvji4oTMWJ7ribxFWr+L6mL5aONISOYkONAlthUk4tZjF88rKDShXWdm/vtoTw3q0qiR9XAz+Iz4L9TEue3W7nxDPzIrzIXhKMf38qhS/UTi8oDh+QZ8LiXtZivLTvXHukB8ObvfGTpqAzNkeSIp3QvzoNhgZLsLwvhb4xqMFpg4wr1oWbY2CZEkVh8s5El+yqLbomuJV+6VkuGi+K8SGOmsVWt8OLa26gw5Rkv52XYqHZ3oLiVqbj1RaTuAKMltJCfyMkvdXSt4Xt/riVXk//IOM4l4Y5k93gZ5Ovapd0+xpVtspcqq2UOW1ur6cbIKLimyYiBO/s1yxeuhESM1vvrpB5bGEkpL5OkHlSSq/5lbRV44pP2eelvOniyG4dNgXMSHGiOjSEpP7muA4iTn52gizesZrtsp+TUO8Kg+oKgZ1aFGu0PwmdJtoxZbs9sZPVCrvFfvX5EluAxTXyrY2eVzx2ckAPL8cijnxjsgcaYEo/9aQDTXHAioU5ylx3y5Y2a8eKyaWLaGyvsoTx+a5Im2o6JWXo+5+hew30GxshNXjl9dCcbfIH3dPKOmnoLJPbZEf7qihME7V6Q5Vqcozgdi3zgvTw02Qm+SIET1bCVUuJsCQ9h5nyg1lYr8pXNly/nC14gq2fao9xocYX3exajyLtDrIJauBs12T1NvHfPHzOflqsGh1Au/Qd5jlR9XRR+Ad4j0ynDDEEtkJbbAvxQnDyUhBsgNmDTBH+nALYfOsKb56NVg4l+ADac5YMMoKkT6tYfCl1vck8wu52rfDrHd3wxcX8nrg2sFeeHwqgMIrCE+o3nP7lGb3cUkA7rM5NnHEB7cLidzW6t+i/tPTgVg/zwMpA0xRutgVuclOVDYNcDDVAevoGBMbaIS8ZEch3pVGOG/OUiU7nUmzT0UhcYAZInu1RnxvE8giRDDR156i0Ppv0ZjYvrFO/SA3B91oaS+jucNDze7PibMX9oJNC9th31ovnMz2xpUDPVFOZh5RzlSQuYoSfzws9sN9Xi0yco/aS/k9MIn2k9wZ9sLs5iRJMKy7AQrTHbEp3pYMWiB5sLkgnPeOc1keOEq7+OpYG6EgxAQYYUa4ObJGibFqrC2WjLKGRSvtJLnU94S7qGHOtgliSlQKhSFmSBlsiqQIcySPsIQs2gYZkxzxfYobdma2R8G6Tji1qysu88ZH5jKmOGHpKJEw26UklI0MISOHZY7YnmCH5WNsEB9sjJ3TafdPc8Li0VaCgQSpKeYNs8TyKBssG0Mm6PSwZWIbbJrQBlatdT7MiF87vfyyTFccm+uEo+kSFKZJcDDFAXkz7LBrsg02jrfGqmgRMqgizRthgfRv6fgyxhpzYmwxl/qHUh2F/YJnXDDSjUIrzQG7E+2xIlpMgq0QT2V5epgpkmmFMkZaY9loMZkQYx2tzNZJbbCDisMeMruF+h9sxL9983w+N52kysGClAfDovkuOD7PhQw648gcJxTKJDhMJjmRcxPtkD3ZlkLKjvYLF6FsnlrsJhiJICMFsx2wh4yspTxZ/K01Fo6wplZMoSPGyrE0ORR2vGI7p8rJRrIpXzZ/rBEufSxGtSTytdJYbfLhjg2wWeVvBCOznAQj+bSiu2mGN0+wFVZgKa0Am+LwURWvyj/YiPoyWX1dPSaYUrkuUYQWG9lHq7aLxPKsb6a4306nXXUGtiv4iY0o+8prVaqOyb/Dm1ruLAkGextU5c5yeC1WEK9mBZif0Ei1sJqsLV71u/KWjeTRPsJGcmbKjagKVbZqSSv3BxqpLVodVT+r+T02wjs7hdZrI+9CpcF9sxyRS78jI3MU0t4PciP0GCsIU4pTEUmn2DfGXrN6jI3kkxHaR6p+pA2ytuDaZANcEPjJM49MZEVZoX/nlo91G9UfoJD2fgj8Sl5+q3OEW1XRyuu3jcv7bGT/bCcM7d7qrUZYPOdMHh0uD8yWYBNVsfHBRlXeLrr5DbXqRpCclnJVH4Be7nrF/JKBH2SuEC8u9xCO0rzBcWWqFq7Kmia4ZSMFqc6CEd5DWLRqXuylR10Wz61smAWkXze/Zq6vnUISJHIlHwn9pg1G+3g23zvI2+BSvNTk+fxIK2yb4oDD6fQcToYur5C/ArpEBvmxlQ+ANR+Y5OQNlV/n8BGFQ4ZNcALn06Fxf4oEq78T0+n2L8/b2TbZSLf1I34uCPgE0CK2JrZvpFV3gNhIJ6mrs+6W/t/ol8YGGz9OpcfODbQnFFD4sBk2dpUegC6vkL/nYtOHyDwb4cTl2eeVmEpHEz9PvaIWTRvwizczvtF/E82JzsQQs1bakzvaNVkj7aR/PCrA6M7MQeZVq2JthUTnVeQHqyVjLDGwi/49WxOdDPpNB/6D/3U0IYqJPoZ62uPcrL9YYdxCa4tW/brhNMZvLDXQQAMNNNBAAw3Uok6d3wEMwmSh7B0m8QAAAABJRU5ErkJggg==';
var data2 = new Image();
data2.src = dataURI2;
game.cache.addImage('wood', dataURI2, data2);
},
create:function(){
game.stage.backgroundColor = "#4488AA";
this.bitmap = game.add.bitmapData(
200,
200
);
this.lightBitmap = game.add.image(0, 0, this.bitmap);
this.lightBitmap.blendMode = Phaser.blendModes.MULTIPLY;
game.physics.startSystem(Phaser.Physics.ARCADE);
this.car =this.game.add.sprite(game.world.centerX,game.world.centerY,'car');
this.car.anchor.setTo(0.5,0.5);
game.physics.arcade.enable(this.car);
game.physics.arcade.enable(this.car);
platforms = game.add.group();
platforms.enableBody = true;
var ground = platforms.create(100,100, 'wood');
var ground2 = platforms.create(400,400, 'wood');
ground.body.immovable = true;
ground2.body.immovable = true;
},
update:function(){
this.car.body.velocity.x =0;
this.car.body.velocity.y = 0;
if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)){
this.car.body.velocity.x = -100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
this.car.body.velocity.x = 100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.UP)){
this.car.body.velocity.y = -100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)){
this.car.body.velocity.y = 100;
}
this.bitmap.fill(50, 50, 50, 1);
this.lightBitmap.x = this.car.body.x-50;
this.lightBitmap.y = this.car.body.y-50;
this.bitmap.dirty = true;
game.world.bringToTop(this.lightBitmap);
},
};
game.state.add('main', mainState);
game.state.start('main');
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.min.js"></script>
<div id="game"></div>
I want to have my "definitionContainer"s Y position to be at the same Y position of the "questionMarkContainer".
Im not sure how to save the Y position of the questionMarkContainer and apply it to "definitionContainer" Y position when the questionMarkContaineris clicked.
I tried
definitionContainer.myNewCords = xOffsetNumberContainer;
definitionContainer.y = definitionContainer.myNewCords;
How can i accomplish the task.
function writeOutDefinitionsQuestionMarksOnRight() {
var yOffsetNumberContainer = 102;
for (var c = 0; c < randomTermsForUserSorting.length; c++) {
var questionMarkContainer = new createjs.Container();
var Highlight = new createjs.Shape();
Highlight.graphics.beginFill("hotPink").drawRoundRect(0, 0, 30, 25, 5);
var HighLightlabel = new createjs.Text("?", "10pt arial bold", "white");
HighLightlabel.textAlign = "center";
HighLightlabel.x = 15
HighLightlabel.y = 5
questionMarkContainer.addChild(Highlight, HighLightlabel);
self.stage.addChild(questionMarkContainer);
questionMarkContainer.x = 720;
questionMarkContainer.y = yOffsetNumberContainer;
questionMarkContainer.termIndex = c;
// calling a function to return the clickHandler function
// because there was some crazy stuff with using the closure of
// termIndex where the clickHandler function was always the last index.
// The 'usual' method of getting around this situation wasnt working for some reason.
var clickHandler = (function (termIndex) {
return function (e) {
var definitionContainer = new createjs.Container();
definitionContainer.myNewCords = yOffsetNumberContainer;
rect = new createjs.Shape();
rect.graphics.beginFill("DarkGreen").drawRoundRect(0, 0, 350, 150, 8);
var name = new createjs.Text(randomTermsForUserSorting[termIndex].Name, "12pt arial", "white");
name.x = 5;
name.y = 5;
name.lineWidth = 300;
var definitionText = new createjs.Text(randomTermsForUserSorting[termIndex].Definition, "10pt arial", "white");
definitionText.x = 5;
definitionText.y = 35;
definitionText.lineWidth = 330;
var xButtonRectangle = new createjs.Shape();
xButtonRectangle.graphics.beginFill("red").drawRoundRect(320, 5, 20, 20, 2);
var xTextCloseButton = new createjs.Text("X", "10pt arial", "white");
xTextCloseButton.x = 325;
xTextCloseButton.y = 7;
definitionContainer.addChild(rect, name, definitionText,xButtonRectangle, xTextCloseButton);
self.stage.addChild(definitionContainer);
definitionContainer.x = 300;
definitionContainer.y = yOffsetNumberContainer;
definitionContainer.addEventListener("click", function () {
self.stage.removeChild(definitionContainer);
});
}
})(c);
questionMarkContainer.addEventListener("click", clickHandler);
yOffsetNumberContainer += 40;
}
}
It looks like you are just adjusting a single yOffsetContainer property, which is referenced inside the click function. The click is fired later, and will use the yOffsetContainer variable, which has already been set to the number of items x 40. It does not save the loop value inside each item.
You should be able to pass the loop value as a parameter in your closure to store the loop value in the click handler:
var clickHandler = (function (termIndex, yOffset) {
return function (e) {
// OTHER CODE NOT SHOWN
definitionContainer.y = yOffset;
// MORE CODE NOT SHOWN
}
})(c, yOffsetNumberContainer);
I am using KineticJS to implement a drawing application. I have used it to draw shapes, straight lines. I have used way described in KineticJS - Drawing Lines with Mouse to draw straight lines. But now my requirement is to draw line along the mouse path! What should be the procedure for that? Can we use Kinetic.Path to do that?
Following code is used to draw straight lines,
var Object,startingPoint;
var down = false;
layer.on("mousedown", function(e) {
down = true;
Object = new Kinetic.Line({
points: [e.layerX, e.layerY,e.layerX+1, e.layerY+1],
stroke: "red"
});
layer.add(Object);
});
layer.on("mousemove", function(e) {
if (down) {
var x = e.layerX;
var y = e.layerY;
Object.getPoints()[1].x = e.layerX;
Object.getPoints()[1].y = e.layerY;
down = true;
layer.draw();
}
});
layer.on("mouseup", function(e) {
down = false;
});
I have replaced Kinetic.Line with Kinetic.Path to achieve the target. But it didn't work.
if you need to add points to a line you can do this:
var points = line.getPoints();
var pos = stage.getUserPosition();
points = points.push(pos.x, pos.y);
line.setPoints(points);
Here how I implemented it. The key is to use spline shape of kineticJS and push points in it during mousemove and mouseup. ev._x, ev._y are the x, and y points calculated in the light of this post
Tracking mouse position in canvas when no surrounding element exists
Please let me know if it helps
tools.pencil = function () {
var tool = this;
this.started = false;
var drawObject;
this.mousedown = function (ev) {
drawObject = new DrawObject();
drawObject.Tool = DrawTool.Pencil;
tool.started = true;
drawObject.currentState = DrawState.Started;
drawObject.StartX = ev._x;
drawObject.StartY = ev._y;
tool.DrawIt(drawObject);
};
this.mousemove = function (ev) {
if (tool.started) {
drawObject.currentState = DrawState.Inprogress;
drawObject.CurrentX = ev._x;
drawObject.CurrentY = ev._y;
tool.DrawIt(drawObject);
};
this.mouseup = function (ev) {
if (tool.started) {
tool.started = false;
drawObject.currentState = DrawState.Completed;
drawObject.CurrentX = ev._x;
drawObject.CurrentY = ev._y;
tool.DrawIt(drawObject);
}
};
this.mouseout = function (ev) {
if (tool.started) {
}
tool.started = false;
};
this.DrawIt = function (drawObject) {
switch (drawObject.currentState) {
case DrawState.Started:
var x= drawObject.StartX,
y = drawObject.StartY;
var pencil = new Kinetic.Spline({
points: [{
x: x,
y: y
}],
stroke: 'red',
strokeWidth: 2,
lineCap: 'round',
tension: 1,
name: shapes.length
});
drawObject.Shape = pencil;
layer.add(pencil);
layer.draw();
break;
case DrawState.Inprogress:
case DrawState.Completed:
var x = drawObject.CurrentX,
y = drawObject.CurrentY;
var pencil = drawObject.Shape;
pencil.attrs.points.push({ x: x, y: y });
pencil.setPoints(pencil.attrs.points);
layer.draw();
if (drawObject.currentState == DrawState.Completed) {
// dosomething
}
break;
}
Where draw object is simple empty function in javascript
function DrawObject()
{
}
and drawstate is all the available state of pencil tool
var DrawState =
{
Started: 0,
Inprogress: 1,
Completed: 2
}
and "layer" is simple KineticJS layer already added in KineticJS stage