How to update universe variable css using create and update methods below:
var gravity = {
universe: function (width, height, color) {
this._width = width;
this._height = height;
this._color = color;
var universe;
var create = function () {
universe = document.createElement("div");
universe.style.border = "5px solid #DDD";
universe.style.overflow = "hidden";
document.body.appendChild(universe);
};
var update = function () {
universe.style.width = this._width + "px";
universe.style.height = this._height + "px";
universe.style.backgroundColor = this._color;
};
create();
update();
}
}
Update method doesn't work.
your update method "doesnt work" because when you call it, this references the window object.
if you wanted it to work, one possible solution would be to set var that = this; outside of the update method and replace all references to this with that inside the method.
this should clear things up a bit
Related
I'm having trouble moving an svg that is inside another svg. I would like to directly effect the x and y value but I get a "read-only" error. Then I tried to use transform however it doesn't do anything. I'm currently using Chrome to test.
Code:
http://jsfiddle.net/un6ep/68/
"use strict";
function SVGGraph(div, data, pos) {
this.div = (div===undefined)?document.getElementsByTagName("BODY")[0]:div;
this.data = (data===undefined)?[]:data;
this.children = [];
this.width = 100;
this.height = 100;
this.pos = {x:0,y:0};
this.scale = 1;
this.rotation = 0;
this.ns = "http://www.w3.org/2000/svg";
/////////////////////////////////////////////////////////
//Functions to set the display the information to the user
/////////////////////////////////////////////////////////
this.generateSelf = function() {
var line = document.createElementNS(this.ns, 'path');
var start = {x:0,y:0}
var end = {x:100,y:100}
var ctrl = 100;
line.setAttribute("d", "M"+start.x+","+start.y+" C"+(start.x+ctrl)+","+start.y+" "+(end.x-ctrl)+","+end.y+" "+end.x+","+end.y+"");
line.style.stroke = "#ff00ff";
line.style.fill = "none";
line.style.strokeWidth = "5px";
this.svg.appendChild(line);
}
/////////////////////////////////////////////////////////
//Functions to deal with child object
/////////////////////////////////////////////////////////
this.addChild = function(data) {
data = (data===undefined)?[]:data;
this.children.push(new SVGGraph(this.svg, data));
}
/////////////////////////////////////////////////////////
//Functions to set the properties of the svg
/////////////////////////////////////////////////////////
this.setPos = function(x, y) {
this.pos.x = x;
this.pos.y = y;
//I would like to do this.svg.x = <some number>
this.updateTransform();
}
this.updateTransform = function() {
console.log('translate('+this.pos.x+','+this.pos.y+')');
this.svg.setAttribute('transform','translate(50,50)');
//this.svg.setAttributeNS(this.ns,'transform','translate(50,50)');
}
/////////////////////////////////////////////////////////
//Init function
/////////////////////////////////////////////////////////
this.init = function() {
//create the svg area
this.svg = document.createElementNS(this.ns, 'svg');
if (this.div.nodeName.toLowerCase() != "svg") {//if the div is not a sub div then make it fill the space
this.svg.style.width = "100%";
this.svg.style.height = "100%";
}
this.svg.style.overflow = "visible";
this.div.appendChild(this.svg);
//generate what this looks like
this.generateSelf();
}
this.init();
}
var temp;
window.onload = mainInit;
function mainInit() {
console.log("hello");
temp = new SVGGraph();
temp.addChild();
temp.children[0].setPos(50,50)
}
mainInit()
As described here, transforms are not supported for svg elements.
But, in order to achieve what you need you will need to wrap everything in a g element (a group) and you can apply the transform to that:
...
var group = document.createElementNS(this.ns, 'g');
group.appendChild(line);
this.svg.appendChild(group);
and then when you set the transform
this.svg.children[0].setAttribute('transform','translate(50,50)');
Like this each SVG you create will have a group and the group will contains everything you need to be translated, and this group will alos support other kinds of transformations. http://jsfiddle.net/un6ep/69/
EDIT: Better you need to use this to work on IE ... seems that IE does not know children:
this.svg.childNodes[0].setAttribute('transform','translate(50,50)');
http://jsfiddle.net/un6ep/70/
I am trying to understand objects in javascript. Here is the code:
var fn={};
var canvas;
var ctx;
fn.game=function(width,height,inSide,name){
this.canvas2=document.getElementById(inSide).innerHTML = "<canvas id="+name+" style='width:"+width+";height:"+height+";'>Your browser does not support the Canvas Element.</canvas>";
this.canvas=document.getElementById(name);
this.ctx=this.canvas.getContext("2d");
document.getElementById(inSide).style.width=width;
document.getElementById(inSide).style.height=height;
canvas=document.getElementById(name);
ctx=this.canvas.getContext("2d");
this.width=width;
this.height=height;
canvas.width=width;
canvas.height=height;
this.add={
};
this.add.state=function(name){
this[name]=3;
};
};
var game=new fn.game(640,480,"game","canvas");
game.addState("play");
when I am referencing this["name"] I am trying to refer this to fn.game, but that dous not work because this references the most local object. Any ideas on how to do this?
As you said, it references the most local object, to do what you explained :
...
fn.game=function(width,height,inSide,name){
var that = this;//expose this of fn.game to this scope
...
this.add={
};
this.add.state=function(name){
that[name]=3;//access this of fn.game
};
};
There are a couple of ways to do this, and it depends on the way you're doing it, although I think the biggest issue you've got is that your object has no declared function of addState() so when I tried to run your code it just gave me an error. In the code below I changed it, and it should work how you want it to currently.
var fn = {};
var canvas;
var ctx;
fn.game = function(width, height, inSide, name) {
this.canvas2 = document.getElementById(inSide).innerHTML = "<canvas id=" + name + " style='width:" + width + ";height:" + height + ";'>Your browser does not support the Canvas Element.</canvas>";
this.canvas = document.getElementById(name);
this.ctx = this.canvas.getContext("2d");
document.getElementById(inSide).style.width = width;
document.getElementById(inSide).style.height = height;
canvas = document.getElementById(name);
ctx = this.canvas.getContext("2d");
this.width = width;
this.height = height;
canvas.width = width;
canvas.height = height;
this.add = {
};
this.addState = function(name) {
this[name] = 3;
console.log(this);
};
};
var game = new fn.game(640, 480, "game", "canvas");
game.addState("play");
<div id="game"></div>
HOWEVER
If you'd like to have that same syntax as before, of game.add.state(), then something like either of the below examples should work:
Example 1
Link to Function.Prototype.Bind
//Rest of code
this.add={};
this.add.state = function(name){
this[name]=3;
}.bind(this)
//Rest of code
Example 2
Javascript Variables and Scope
//Rest of code
this.add={};
var self = this;
this.add.state = function(name){
self[name]=3;
}
//Rest of Code
every time you are inside a function() the meaning of this changes to the current function
all you need to do is save the reference to the object you want to access
fn.game=function(width,height,inSide,name){
var self = this;
this.add.state=function(name){
self[name]=3;
};
};
In order for this to mean mean fn.game, you would need to do something more like:
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
function C(t){
return doc.createElement(t);
}
function FnGameAdd(){
this.state = function(popertyName){
this[propertyName] = 3;
}
}
function FnGame(canvasId, width, height, inside){
// style with CSS
inside.innerHTML = "<canvas id='"+canvasId+"'>Your browser does not support the Canvas Element.</canvas>";
var cv = this.canvas = E(canvasId);
cv.height = height; cv.width = width; this.ctx = cv.getContext('2d');
this.add = new FnGameAdd;
};
}
var fn = {};
fn.game = function(canvasId, width, height, inside){
// this.prop = 'belongs to fn';
return new FnGame(canvasId, width, height, inside);
}
new fn.game('canvas', 640, 480, E('game'));
/* keep this for fun of creating new Object literals, not needed here
Object.create = Object.create || function(obj){
function F(){}; F.prototype = obj;
return new F;
}
var newObj = Object.create(fn);*/
When we create multiple sprites, the function mouseover is called when any hover in hitArea polygon. Regardless, whether applied to another object.
Visibility of sprite governed by sorting the array. The later was added to the sprite in stage.children, the higher it will be. Here is an example in which one rectangle superimposed on the other. At the same time, when we put things on the upper left corner of the bottom sprite, at the top of the object function mouseover will work call, although it is under the other.
How to solve this problem? hitarea not suitable, since the facilities will be constantly dragging.
Thanks in advance for your reply!
var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );
var texture = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xFFFF00);
r1.drawRect(0, 0, 400, 400)
r1.endFill()
texture.render(r1);
var texture2 = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xDDDD00);
r1.drawRect(0, 0, 300, 300)
r1.endFill()
texture2.render(r1);
createBunny(100, 100, texture)
createBunny(120, 120, texture2)
function createBunny(x, y, texture) {
var bunny = new PIXI.Sprite(texture);
bunny.interactive = true;
bunny.buttonMode = true;
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.scale.x = bunny.scale.y = 0.5;
bunny.mouseover = function(data) {
console.log('mouse over!')
}
bunny.mousedown = bunny.touchstart = function(data) {
this.data = data;
this.alpha = 0.9;
this.dragging = true;
this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;
this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;
};
bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data) {
this.alpha = 1
this.dragging = false;
this.data = null;
};
bunny.mousemove = bunny.touchmove = function(data) {
if(this.dragging) {
var newPosition = this.data.getLocalPosition(this.parent);
this.position.x = newPosition.x - this.sx;
this.position.y = newPosition.y - this.sy;
}
}
bunny.position.x = x;
bunny.position.y = y;
stage.addChild(bunny);
}
function animate() {
requestAnimFrame( animate );
renderer.render(stage);
}
http://jsfiddle.net/sD8Tt/48/
I know this is old thread, but for those who come to this page, the issue can be fixed by extending the PIXI's Sprite Class, Look at the following code.
PIXI.Sprite.prototype.bringToFront = function() {
if (this.parent) {
var parent = this.parent;
parent.removeChild(this);
parent.addChild(this);
}
}
And call above method in mousedown event like this
this.bringToFront();
Working JSFiddle
http://jsfiddle.net/6rk58cqa/
Fiddle!
I am trying to create a very basic 'plugin', if you can even call this that. I want to be able to use this line var box = new colorBox(node, options); (at the end of the JS) in order to edit the style of div#thing1. I think my problem is invoking the functions I have set up. I do not want to have to call colorBox.setSize() to have an initial effect, but i want to be able to call it later if i want after the object of colorBox prototype is set up. Thanks!
HTML:
<div id="thing1"></div>
<div id="thing2"></div>
JS:
var colorBox = {
setSize: function(){
node.style.width = options.width + 'px';
node.style.height = options.height + 'px';
},
setColor: function(){
node.style.backgroundColor = options.color;
},
setSize(),
setColor()
}
var node = document.getElementById('thing1');
var options = {
color: 'red',
width: 200,
height: 200
}
var box = new colorBox(node, options);
Create a new object using a constructor function:
var colorBox = function(node, options) {
this.setSize = function(){
node.style.width = options.width + 'px';
node.style.height = options.height + 'px';
};
this.setColor = function(){
node.style.backgroundColor = options.color;
};
this.setSize();
this.setColor();
}
var node = document.getElementById('thing1');
var options = {
color: 'red',
width: 200,
height: 200
}
var box = new colorBox(node, options);
fiddle: http://jsfiddle.net/e7gX8/1/
You are missing a constructor function to set the values you were passing. Here's how you can do this :
var colorBox = function(node, options) {
this.setSize = function(){
node.style.width = options.width + 'px';
node.style.height = options.height + 'px';
};
this.setColor = function(){
node.style.backgroundColor = options.color;
};
this.setSize();
this.setColor();
}
Try in this fiddle
You are mixing up different ways of making objects in javascript. What you want is probably the way in Lyn Headley's answer. This is the other way (or rather one of the other ways), which would also work but is needlessly complicated and would only allow you to have a single colorBox (but it might be useful to know for other situations).
var colorBox = {
setSize: function(){
this.node.style.width = this.options.width + 'px';
this.node.style.height = this.options.height + 'px';
},
setColor: function(){
this.node.style.backgroundColor = this.options.color;
},
initialize: function(node, options) {
this.node = node;
this.options = options;
this.setSize();
this.setColor();
}
}
var node = document.getElementById('thing1');
var options = {
color: 'red',
width: 200,
height: 200
}
colorBox.initialize(node, options);
I want to call to method setupCanvas.Draw(); to draw rectangle.
And for some reason I can not call a function Draw(); from out the scop game.setupCanvas();
Demo jsfiddle
window.game = window.game|| {};
game.main = function() {};
game.setupCanvas = function(){
var w = $(window).outerWidth();
var h = $(window).outerHeight();
myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);
myCanvas.id = "playground";
myCanvas.width = w * 0.8;
myCanvas.height = h * 0.8;
myCanvas.style.left= (w - myCanvas.width )/2 + 'px' ;
myCanvas.style.top= (h - myCanvas.height )/2 + 'px' ;
myCanvas.style.zIndex = 10;
myCanvas.style.position = "absolute";
myCanvas.style.border = "1px solid green ";
this.ctx= $('#playground').get(0).getContext('2d');
this.Draw = function(){
ctx.fillStyle="#0000FF";
ctx.fillRect(150,75,150,75);
ctx.fillStyle="#F0F0FF";
ctx.fillRect(0,0,150,75);
};
}();
game.setupCanvas.Draw();
Many thanks
You need to create a new instance:
var x = new game.setupCanvas();
x.Draw();
Also, this part is wrong:
};
}(); // <--
game.setupCanvas.Draw();
You're immediately-invoking the function, which you shouldn't be doing. It returns undefined to game.setupCanvas. Take it away and your code should work.
Moreover, when you reference a thectx property in your Draw method, you need to use this.ctx.
jsFiddle Demo
Your assignment of game.setupCanvas is invalid since the self invoking function doesn't return anything so game.setupCanvas will be undefined. Make sure to return an object with your public methods like this.
return {
Draw: function(){
ctx.fillStyle="#0000FF";
ctx.fillRect(150,75,150,75);
ctx.fillStyle="#F0F0FF";
ctx.fillRect(0,0,150,75);
},
DrawSomethingElse: function(){
ctx.fillStyle="#0000FF";
ctx.fillRect(150,75,150,75);
ctx.fillStyle="#F0F0FF";
ctx.fillRect(0,0,150,75);
}
};
Here is an update to your fiddle http://jsfiddle.net/dAvtS/11/