How to use a switch? - actionscript-3

My question is, which one is better to use? How to properly use a switch statement. Should I use variables or not etc. I thank you in advance for your reply. "random text because I need a lot of explanation or else it won't let me post."
switch(level_id)
{
case 1:
stage.addChild(new lvl(50, 200, 100, level_id));
break;
case 2:
stage.addChild(new lvl(50, 200, 100, level_id));
break;
case 3:
stage.addChild(new lvl(50, 200, 100, level_id));
break;
case 4:
stage.addChild(new lvl(50, 200, 100, level_id));
break;
case 5:
stage.addChild(new lvl(50, 200, 100, level_id));
break;
case 6:
stage.addChild(new lvl(50, 200, 100, level_id));
break;
case 7:
stage.addChild(new lvl(50, 200, 100, level_id));
break;
default:
break;
}
or
switch(level_id)
{
case 1:
x = 50; y = 200; x = 100;
break;
case 2:
x = 50; y = 200; x = 100;
break;
case 3:
x = 50; y = 200; x = 100;
break;
case 4:
x = 50; y = 200; x = 100;
break;
case 5:
x = 50; y = 200; x = 100;
break;
case 6:
x = 50; y = 200; x = 100;
break;
case 7:
x = 50; y = 200; x = 100;
break;
default:
break;
}
stage.addChild(new lvl(x, y, z, level_id));
What I finally did (edit)
Final result, thanks all
var config:Object = {
"1":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 },
"2":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 },
"3":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 },
"4":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 },
"5":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 },
"6":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 },
"7":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 },
"8":{ "paddWidth":50, "blockWidth":200, "blockHeight":100 }
};
stage.addChild(new lvl(
config[level_id].paddWidth,
config[level_id].blockWidth,
config[level_id].blockHeight,
level_id
));

Another option might be (untested code):
var config:Object = {
"1":{ "x":50, "y":100, "z":150 },
"2":{ "x":51, "y":101, "z":151 },
"3":{ "x":52, "y":102, "z":152 },
"4":{ "x":53, "y":103, "z":153 },
"5":{ "x":54, "y":104, "z":154 },
"6":{ "x":55, "y":105, "z":155 },
"7":{ "x":56, "y":106, "z":156 },
"8":{ "x":57, "y":107, "z":157 }
};
x = config[level_id].x;
y = config[level_id].y;
z = config[level_id].z;
stage.addChild(new lvl(x, y, z));

You could also store all the values in some arrays. and access them via index.
var lvlx:Array = [50, 51, 52, 53, 54, 55, 56, 57];
var lvly:Array = [100, 101, 102, 103, 104, 105, 106, 107];
var lvlz:Array = [150, 151, 152, 153, 154, 155, 156, 157];
var lvlIndex:int = level_id - 1;
stage.addChild(new lvl(lvlx[lvlIndex], lvly[lvlIndex], lvlz[lvlIndex]));
You could even make it a two dimensional array, but I thought an array for each x, y, and z was simple, and faster than storing objects in an array.
A really good (and fast) option, would be to use Vectors, with the quick notation:
var lvlx:Vector.<int> = new <int>[50, 51, 52, 53, 54, 55, 56, 57];

There's not much of a difference in your case, but I would go with the latter. There is less code duplication this way (i.e. what happens if you want to change the parent of the level, so instead of stage.addChild you have someContainer.addChild, with the first method you would have to replace every instance of stage with someContainer vs. the second method replacing in only place).
If you're worried about lines of code, you can store the variables on one line:
x = 57; y = 107; z = 157;

As an entirely different approach, I would make a Level class that has the properties x, y and z and the method load.
Then I'd create instances of all the levels that are in the game with the appropriate values and load whichever one is relevant.
Sample:
public class Level
{
public x:int;
public y:int;
public z:int;
public function Level(x:int, y:int, z:int)
{
this.x = x;
this.y = y;
this.z = z;
}
public function load(stage:Stage):void
{
// This is where the Level will do resource consuming stuff, like get
// added to the stage, create level elements, etc.
}
}
Then just create all your levels and store them in an Array:
var levels:Array = [
new Level(50, 100, 120),
new Level(65, 70, 12)
];
Which means it's easy to load whichever level you want now by just having something like this:
function loadLevel(lvl:int):Level
{
var level:Level = levels[lvl];
level.load();
return level;
}

Related

I am trying to set this HTML code to a chromebook background. Is this possible?

I am trying to set this HTML code to a Chromebook background. Is this possible? I also don't want to have to use any extensions.
<style>*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
height: 100%;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
canvas{
background-color: #000;
}</style>
<div class="container">
<div class="row">
<canvas id="nokey" width="800" height="800">
</canvas>
</div>
</div>
<script>
var canvas = document.getElementById('nokey'),
can_w = parseInt(canvas.getAttribute('width')),
can_h = parseInt(canvas.getAttribute('height')),
ctx = canvas.getContext('2d');
// console.log(typeof can_w);
var ball = {
x: 0,
y: 0,
vx: 0,
vy: 0,
r: 0,
alpha: 1,
phase: 0
},
ball_color = {
r: 207,
g: 255,
b: 4
},
R = 2,
balls = [],
alpha_f = 0.03,
alpha_phase = 0,
// Line
link_line_width = 0.8,
dis_limit = 260,
add_mouse_point = true,
mouse_in = false,
mouse_ball = {
x: 0,
y: 0,
vx: 0,
vy: 0,
r: 0,
type: 'mouse'
};
// Random speed
function getRandomSpeed(pos){
var min = -1,
max = 1;
switch(pos){
case 'top':
return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
break;
case 'right':
return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
break;
case 'bottom':
return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
break;
case 'left':
return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
break;
default:
return;
break;
}
}
function randomArrayItem(arr){
return arr[Math.floor(Math.random() * arr.length)];
}
function randomNumFrom(min, max){
return Math.random()*(max - min) + min;
}
console.log(randomNumFrom(0, 10));
// Random Ball
function getRandomBall(){
var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
switch(pos){
case 'top':
return {
x: randomSidePos(can_w),
y: -R,
vx: getRandomSpeed('top')[0],
vy: getRandomSpeed('top')[1],
r: R,
alpha: 1,
phase: randomNumFrom(0, 10)
}
break;
case 'right':
return {
x: can_w + R,
y: randomSidePos(can_h),
vx: getRandomSpeed('right')[0],
vy: getRandomSpeed('right')[1],
r: R,
alpha: 1,
phase: randomNumFrom(0, 10)
}
break;
case 'bottom':
return {
x: randomSidePos(can_w),
y: can_h + R,
vx: getRandomSpeed('bottom')[0],
vy: getRandomSpeed('bottom')[1],
r: R,
alpha: 1,
phase: randomNumFrom(0, 10)
}
break;
case 'left':
return {
x: -R,
y: randomSidePos(can_h),
vx: getRandomSpeed('left')[0],
vy: getRandomSpeed('left')[1],
r: R,
alpha: 1,
phase: randomNumFrom(0, 10)
}
break;
}
}
function randomSidePos(length){
return Math.ceil(Math.random() * length);
}
// Draw Ball
function renderBalls(){
Array.prototype.forEach.call(balls, function(b){
if(!b.hasOwnProperty('type')){
ctx.fillStyle = 'rgba('+ball_color.r+','+ball_color.g+','+ball_color.b+','+b.alpha+')';
ctx.beginPath();
ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
});
}
// Update balls
function updateBalls(){
var new_balls = [];
Array.prototype.forEach.call(balls, function(b){
b.x += b.vx;
b.y += b.vy;
if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){
new_balls.push(b);
}
// alpha change
b.phase += alpha_f;
b.alpha = Math.abs(Math.cos(b.phase));
// console.log(b.alpha);
});
balls = new_balls.slice(0);
}
// loop alpha
function loopAlphaInf(){
}
// Draw lines
function renderLines(){
var fraction, alpha;
for (var i = 0; i < balls.length; i++) {
for (var j = i + 1; j < balls.length; j++) {
fraction = getDisOf(balls[i], balls[j]) / dis_limit;
if(fraction < 1){
alpha = (1 - fraction).toString();
ctx.strokeStyle = 'rgba(150,150,150,'+alpha+')';
ctx.lineWidth = link_line_width;
ctx.beginPath();
ctx.moveTo(balls[i].x, balls[i].y);
ctx.lineTo(balls[j].x, balls[j].y);
ctx.stroke();
ctx.closePath();
}
}
}
}
// calculate distance between two points
function getDisOf(b1, b2){
var delta_x = Math.abs(b1.x - b2.x),
delta_y = Math.abs(b1.y - b2.y);
return Math.sqrt(delta_x*delta_x + delta_y*delta_y);
}
// add balls if there a little balls
function addBallIfy(){
if(balls.length < 20){
balls.push(getRandomBall());
}
}
// Render
function render(){
ctx.clearRect(0, 0, can_w, can_h);
renderBalls();
renderLines();
updateBalls();
addBallIfy();
window.requestAnimationFrame(render);
}
// Init Balls
function initBalls(num){
for(var i = 1; i <= num; i++){
balls.push({
x: randomSidePos(can_w),
y: randomSidePos(can_h),
vx: getRandomSpeed('top')[0],
vy: getRandomSpeed('top')[1],
r: R,
alpha: 1,
phase: randomNumFrom(0, 10)
});
}
}
// Init Canvas
function initCanvas(){
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
can_w = parseInt(canvas.getAttribute('width'));
can_h = parseInt(canvas.getAttribute('height'));
}
window.addEventListener('resize', function(e){
console.log('Window Resize...');
initCanvas();
});
function goMovie(){
initCanvas();
initBalls(20);
window.requestAnimationFrame(render);
}
goMovie();
// Mouse effect
canvas.addEventListener('mouseenter', function(){
console.log('mouseenter');
mouse_in = true;
balls.push(mouse_ball);
});
canvas.addEventListener('mouseleave', function(){
console.log('mouseleave');
mouse_in = false;
var new_balls = [];
Array.prototype.forEach.call(balls, function(b){
if(!b.hasOwnProperty('type')){
new_balls.push(b);
}
});
balls = new_balls.slice(0);
});
canvas.addEventListener('mousemove', function(e){
var e = e || window.event;
mouse_ball.x = e.pageX;
mouse_ball.y = e.pageY;
// console.log(mouse_ball);
});
</script>
Since you said, "Chromebook." There's no native support for it as you're asking; without extension.
According to Google's Chromebook Help, they state only .png & .jpg backgrounds.
If you haven't yet, download an image (.png or .jpg) from the web that
you’d like as your wallpaper.
Also, referencing the crosexperts website, it states:
there’s no native support for moving wallpapers, we had to create an
engine — and editor — to make this possible. But, amazingly, it is
possible.
Chrome OS doesn’t support Live Wallpapers in any way.

HTML canvas : how to create a polygon filled with a grid

I order to build a HTML 5 datacenter floor plan, I would like to create a polygon filled with a grid. This grid must not be a picture pattern as I would like to be able to zoom or rotate the floor plan without having pixelization.
I would like to be able to create this kind of output :
How can I do that ?
There are multiple ways, like
using a clipping region
var ctx = c.getContext('2d');
drawShape();
ctx.stroke();
ctx.save(); // so we can remove the clipping
ctx.clip();
drawGrid();
ctx.restore(); // remove the clipping
function drawShape() {
ctx.beginPath();
var pts = [
20, 20,
80, 20,
90, 50,
120, 90,
30, 80,
20,20
];
for(var i=0;i<pts.length;i+=2){
ctx.lineTo(pts[i], pts[i+1]);
}
}
function drawGrid() {
ctx.beginPath();
for(var x=-.5; x<c.width; x+=20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, c.height);
}
for(var y=-.5; y<c.height; y+=20) {
ctx.moveTo(0, y);
ctx.lineTo(c.width, y);
}
ctx.stroke();
}
<canvas id="c"></canvas>
using compositing
var ctx = c.getContext('2d');
drawGrid();
ctx.globalCompositeOperation = 'destination-in';
drawShape();
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
ctx.stroke();
function drawShape() {
ctx.beginPath();
var pts = [
20, 20,
80, 20,
90, 50,
120, 90,
30, 80,
20,20
];
for(var i=0;i<pts.length;i+=2){
ctx.lineTo(pts[i], pts[i+1]);
}
}
function drawGrid() {
ctx.beginPath();
for(var x=-.5; x<c.width; x+=20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, c.height);
}
for(var y=-.5; y<c.height; y+=20) {
ctx.moveTo(0, y);
ctx.lineTo(c.width, y);
}
ctx.stroke();
}
<canvas id="c"></canvas>
But in your case, a regular grid, it might actually be better to use a pattern.
Indeed, you'd have to only draw one cell every time you change the scale of your grid, for translations, this can be done internally.
So I didn't do the performance tests myself, and thus encourage you to double check it's worth it, but theoretically, it might be faster and esaier to manage than redrawing the grid every time.
var ctx = c.getContext('2d');
var pat_ctx = document.createElement('canvas').getContext('2d');
var cell_size = 20;
// just a basic drawing example
// first we generate the grid as a pattern
ctx.fillStyle = generatePattern(cell_size, cell_size);
drawShape();
ctx.stroke();
// we move the pattern by half a cell because we actually drawn only a cross
ctx.translate(-cell_size / 2, -cell_size / 2);
ctx.fill();
// make the grid follow the mouse
// without having to redraw ourself the grid
onmousemove = function(e) {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);
drawShape();
ctx.stroke();
// move the grid
ctx.translate(e.clientX - cell_size / 2, e.clientY - -cell_size / 2);
ctx.fill();
}
// click to zoom (+shift to zoom out)
onclick = function(e) {
if (e.shiftKey) cell_size--;
else cell_size++;
ctx.fillStyle = generatePattern(cell_size, cell_size);
onmousemove(e);
}
// dimply draws a cross
function generatePattern(w, h) {
var canvas = pat_ctx.canvas;
canvas.width = w;
canvas.height = h;
pat_ctx.moveTo(w / 2, 0);
pat_ctx.lineTo(w / 2, h);
pat_ctx.moveTo(0, h / 2);
pat_ctx.lineTo(w, h / 2);
pat_ctx.stroke();
return pat_ctx.createPattern(canvas, 'repeat');
}
function drawShape() {
ctx.beginPath();
var pts = [
20, 20,
80, 20,
90, 50,
120, 90,
30, 80,
20, 20
];
for (var i = 0; i < pts.length; i += 2) {
ctx.lineTo(pts[i], pts[i + 1]);
}
}
<canvas id="c"></canvas>

ActionScript 3 - Collision detection of objects in an array issue

I'm working on a small flash game and am currently trying to implement multiplayer for up to 4 players. While the collision detection for 1 player works perfectly, when more players are added only the last player can collide with other objects.
Using trace statements I discovered that calling the x and y coordinates of the problematic players from the main class returns the initial x and y positions and not the current coordinates (trace(players[0].x + "/" + players[0].y);), while calling them from within the player class (trace(this.x + "/" + this.y);) always gives the correct values.
The last player will always return the correct coordinates in both classes. Below is a skeleton of the main class.
public class main extends MovieClip {
public var collisionObject: Array = new Array(14);
public var players: Array = new Array();
private var noOfPlayers = 2;
public function main() {
for (var i = 0; i < noOfPlayers; i++) {
setupPlayer(i);
stage.addChild(players[i]);
}
setupCollisionObject();
stage.addEventListener(Event.ENTER_FRAME, checkForCollision);
}
private function setupCollisionObject() {
/* Determines positions of and spawns objects */
}
private function setupPlayer(playerNo) {
switch (playerNo) {
case 3:
players[3] = new player(1000, 576, 180, 104, 100, 102);
case 2:
players[2] = new player(24, 576, 0, 73, 74, 76);
case 1:
players[1] = new player(1000, 384, 180, 38, 37, 39);
case 0:
players[0] = new player(24, 384, 0, 87, 65, 68);
}
}
public function checkForCollision(e: Event) {
trace("x: "+players[0].x+" y: "+players[0].y);
trace("x: "+players[1].x+" y: "+players[1].y);
for (var i in players) {
for (var j in collisionObject) {
if (players[i].hitTestObject(collisionObject[j])) {
//damage player
}
}
}
}
}
I'm at a loss of why this is happening.
You are missing break; in your switch-case in setupPlayer(), this results in all players but the last reinitialize during each call of setupPlayers(i).
private function setupPlayer(playerNo) {
switch (playerNo) {
case 3:
players[3] = new player(1000, 576, 180, 104, 100, 102);
break;
case 2:
players[2] = new player(24, 576, 0, 73, 74, 76);
break;
case 1:
players[1] = new player(1000, 384, 180, 38, 37, 39);
break;
case 0:
players[0] = new player(24, 384, 0, 87, 65, 68);
break;
}
}

How to change Y axis labels

I am using Chartjs to make line chart.How can I change the y axis labels to colours? (i.e. red for 1, green for 2, black for 3, ..)
UPDATE i've now added this feature into my fork of chartjs at https://github.com/leighquince/Chart.js, meanign you would not have to override or extend a new chart type. Just pass the option in like normal, here is an example http://fiddle.jshell.net/leighking2/jLzvhf4f/
So this could be achieved by overriding the scales draw method to run a custom function we provide when declaring the chart rather than just adding.
Below is the snippet but just as an explanation here is what has happened
created a new chart and overridden the buildScale method to pass a new option called customYLabel. this will be the option you pass to your chart when you declare it and it has 4 parameters; the value of the label, x position, y position, the canvas, this index of the label
the build scale also makes use of a custom scale
create a custom scale which overrides the normal scales draw method to check for this customYLabel option and uses it if present
the reset is normal, what you customYLabel does is up to you but it should at the very least call `ctx.fillText(value,x,y) so that the label is drawn on the canvas. In the below example i colour the label based on it's index but the options there many.
(here is a fiddle as well if thats easier to view http://fiddle.jshell.net/leighking2/2cac5t34/)
//extract helpers so we can use them in our custom scale class
var helpers = Chart.helpers,
each = helpers.each,
aliasPixel = helpers.aliasPixel,
toRadians = helpers.radians;
//new line chart which has an overridden buildscale that will pass the new option customYLabel
Chart.types.Line.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "LineAlt",
initialize: function (data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
buildScale: function (labels) {
var self = this;
var dataTotal = function () {
var values = [];
self.eachPoints(function (point) {
values.push(point.value);
});
return values;
};
var scaleOptions = {
templateString: this.options.scaleLabel,
height: this.chart.height,
width: this.chart.width,
ctx: this.chart.ctx,
textColor: this.options.scaleFontColor,
fontSize: this.options.scaleFontSize,
fontStyle: this.options.scaleFontStyle,
fontFamily: this.options.scaleFontFamily,
valuesCount: labels.length,
beginAtZero: this.options.scaleBeginAtZero,
integersOnly: this.options.scaleIntegersOnly,
//new options for custom y label
customYLabel: this.options.customYLabel,
calculateYRange: function (currentHeight) {
var updatedRanges = helpers.calculateScaleRange(
dataTotal(),
currentHeight,
this.fontSize,
this.beginAtZero,
this.integersOnly);
helpers.extend(this, updatedRanges);
},
xLabels: labels,
font: helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
lineWidth: this.options.scaleLineWidth,
lineColor: this.options.scaleLineColor,
showHorizontalLines: this.options.scaleShowHorizontalLines,
showVerticalLines: this.options.scaleShowVerticalLines,
gridLineWidth: (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
gridLineColor: (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
showLabels: this.options.scaleShowLabels,
display: this.options.showScale
};
if (this.options.scaleOverride) {
helpers.extend(scaleOptions, {
calculateYRange: helpers.noop,
steps: this.options.scaleSteps,
stepValue: this.options.scaleStepWidth,
min: this.options.scaleStartValue,
max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
});
}
this.scale = new Chart.CustomScale(scaleOptions);
},
});
//custom scale to use new customYLabel option
Chart.CustomScale = Chart.Scale.extend({
draw: function () {
var ctx = this.ctx,
yLabelGap = (this.endPoint - this.startPoint) / this.steps,
xStart = Math.round(this.xScalePaddingLeft);
if (this.display) {
ctx.fillStyle = this.textColor;
ctx.font = this.font;
each(this.yLabels, function (labelString, index) {
var yLabelCenter = this.endPoint - (yLabelGap * index),
linePositionY = Math.round(yLabelCenter),
drawHorizontalLine = this.showHorizontalLines;
ctx.textAlign = "right";
ctx.textBaseline = "middle";
if (this.showLabels) {
//if we have a customYLabel use it passing the value, x, y , canvas and index
if (this.customYLabel) {
this.customYLabel(labelString, xStart - 10, yLabelCenter, ctx, index);
} else {
ctx.fillText(labelString, xStart - 10, yLabelCenter);
}
}
// This is X axis, so draw it
if (index === 0 && !drawHorizontalLine) {
drawHorizontalLine = true;
}
if (drawHorizontalLine) {
ctx.beginPath();
}
if (index > 0) {
// This is a grid line in the centre, so drop that
ctx.lineWidth = this.gridLineWidth;
ctx.strokeStyle = this.gridLineColor;
} else {
// This is the first line on the scale
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
}
linePositionY += helpers.aliasPixel(ctx.lineWidth);
if (drawHorizontalLine) {
ctx.moveTo(xStart, linePositionY);
ctx.lineTo(this.width, linePositionY);
ctx.stroke();
ctx.closePath();
}
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
ctx.beginPath();
ctx.moveTo(xStart - 5, linePositionY);
ctx.lineTo(xStart, linePositionY);
ctx.stroke();
ctx.closePath();
}, this);
each(this.xLabels, function (label, index) {
var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
// Check to see if line/bar here and decide where to place the line
linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
isRotated = (this.xLabelRotation > 0),
drawVerticalLine = this.showVerticalLines;
// This is Y axis, so draw it
if (index === 0 && !drawVerticalLine) {
drawVerticalLine = true;
}
if (drawVerticalLine) {
ctx.beginPath();
}
if (index > 0) {
// This is a grid line in the centre, so drop that
ctx.lineWidth = this.gridLineWidth;
ctx.strokeStyle = this.gridLineColor;
} else {
// This is the first line on the scale
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
}
if (drawVerticalLine) {
ctx.moveTo(linePos, this.endPoint);
ctx.lineTo(linePos, this.startPoint - 3);
ctx.stroke();
ctx.closePath();
}
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
// Small lines at the bottom of the base grid line
ctx.beginPath();
ctx.moveTo(linePos, this.endPoint);
ctx.lineTo(linePos, this.endPoint + 5);
ctx.stroke();
ctx.closePath();
ctx.save();
ctx.translate(xPos, (isRotated) ? this.endPoint + 12 : this.endPoint + 8);
ctx.rotate(toRadians(this.xLabelRotation) * -1);
ctx.font = this.font;
ctx.textAlign = (isRotated) ? "right" : "center";
ctx.textBaseline = (isRotated) ? "middle" : "top";
ctx.fillText(label, 0, 0);
ctx.restore();
}, this);
}
}
});
var randomScalingFactor = function () {
return Math.round(Math.random() * 100)
};
//example colour generator from
//https://www.designedbyaturtle.co.uk/2014/convert-string-to-hexidecimal-colour-with-javascript-vanilla/
// Convert an int to hexadecimal with a max length
// of six characters.
var intToARGB = function (i) {
var h = ((i >> 24) & 0xFF).toString(16) + ((i >> 16) & 0xFF).toString(16) + ((i >> 8) & 0xFF).toString(16) + (i & 0xFF).toString(16);
return h.substring(0, 6);
}
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [null, 10, null, null, 60, null, null]
}]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).LineAlt(lineChartData, {
//example of how this can be used, could use the value instead of the index
customYLabel: function (value, x, y, ctx, index) {
var defaultStyle = ctx.fillStyle;
ctx.fillStyle = '#' + intToARGB(index * 123456);
ctx.fillText(value, x, y);
ctx.fillStyle = defaultStyle;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.js"></script>
<div style="width:100%">
<div>
<canvas id="canvas" height="200" width="600"></canvas>
</div>
</div>

Draw Kinetic.Shape in for-loop - var i of for-loop isn't taken properly in drawFunc()

Is it possible to use the variable i of a for-loop (for(i=0; i<3; i++)) in wich the Kinetic.Shape is created to set the y-value in the custom drawFunc();
My code of the for-loop for the dynamic shape creation looks the following:
var layer = new Kinetic.Layer();
for (i = 0; i < 3; i++){
layer.add(new Kinetic.Shape({
x: 0,
y: 0,
width: 400,
height: 400,
drawFunc: function(canvas){
console.log(i); //THIS LOG ALWAYS OUTPUTS THE MAX i-VALUE (here 3)
var ctx = canvas.getContext();
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.fillRect(10, i*30+2, 200, 30);
ctx.closePath();
ctx.fill();
}
}));
}
stage.add(layer);
If i log the i-value in the custom drawFunc(); the result is always 3instead of 0, 1, 2, and because of that the ctx.fillRect draws all three shapes at y = 92.
Here is a fiddle of my code with the explained behaviour.
Am I missing something obvious? Any help is greatly appreciated.
You can try something like this. By adding the layers using a function the value passed to the createLayer function is saved with each Kinetic.Shape object that's created through closures.
function createLayer(nbr){
layer.add(new Kinetic.Shape({
x: 0,
y: 0,
width: 400,
height: 400,
drawFunc: function(canvas){
console.log(nbr);
var ctx = canvas.getContext();
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.fillRect(10, nbr*30+2, 200, 30);
ctx.closePath();
ctx.fill();
}
}));
}
for (var i = 0; i < 3; i++){
createLayer(i);
}