Comments (4)
Glad you like it! I'm not at a computer right this second.., but have you
tried setting group.visible = false;
Groups and shapes all have the visible property, a Boolean.
On Monday, May 13, 2013, Richard Shaw wrote:
I hope this is the right place for this! Using two.js, what could be the
best approach to properly create shape objects (like using makeLine,
makeRectangle, etc) without having them appear in the scene immediately,
add them to a group, then have the shapes appear in the scene thereafter?
I'm sure that question in a bit unclear, so here is an example:/.../function: buildShape(){
this.shape = two.makeGroup();
this.shape.translation.set(this.X,this.Y);var unitBody = two.makeRectangle(0,0,28,16);
var pod = two.makeCirucle(0,0,this.podSize);
var barrel = two.makeLine(0,0,this.barrelLen,0);this.shape.add(unitBody,pod,barrel);}/.../
While the above works just fine in code and eventual outcome, there is a
split second that the three shape objects appear at the top left of the
screen (0px, 0px) since that's what I have to do for them to appear
properly in the group after adding them.Without having to copy/paste your make functions so that I can manipulate
them to not place the shape on the screen, is there any other way to do
this?Thanks in advance for an awesome library!
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/19
.
http://jonobr1.com/
[email protected]
from two.js.
As a matter of fact I have! I dove into the source just to see if you did implement some sort of feature like that (and you have!).
I actually created a little "twoExt.js" file of my own that adds some feature like "hide, show, toggle":
/*...*/
var VisualFuncs = {
show: function(){ this.visible = true; if(this) return this; },
hide: function(){ this.visible = false; if(this) return this; },
toggle: function(){ this.visible = !this.visible; if(this) return this; }
};
_.extend(Two.Polygon.prototype, VisualFuncs);
_.extend(Two.Group.prototype, VisualFuncs);
/*...*/
I decided to so some chaining in there so I could do something like:
this.shape = two.makeGroup().hide();
var b = two.makeRectangle(0,0,24,16).hide();
b.fill = 'red';
b.stroke = 'green';
this.shape.add(b);
this.shape.show(); // Would setting this to "visible = true" make its children visible too?
I guess with that kind of implementation, would you automatically show "b" above once the parent group's "visible" property is set to true (using show())?
Thanks for getting back to me so quickly!
from two.js.
You're exactly right. As a result you'd have to modify your VisualFuncs a bit:
/*...*/
var PolygonFuncs = {
show: function(){ this.visible = true; if(this) return this; },
hide: function(){ this.visible = false; if(this) return this; },
toggle: function(){ this.visible = !this.visible; if(this) return this; }
};
var GroupFuncs = {
show: function() { _.each(this.children, function(child) { child.show(); }); return this; },
hide: function() { _.each(this.children, function(child) { child.hide(); }); return this; },
toggle: function() { _.each(this.children, function(child) { child.toggle(); }); return this; }
};
_.extend(Two.Polygon.prototype, PolygonFuncs);
_.extend(Two.Group.prototype, GroupFuncs);
/*...*/
Nice work!
from two.js.
Thanks for the update (especially on my existing code)! Completely skipped my mind about using the _.each method to work on all the child objects in a group in this context.
I'll use this and see what I can do. Thanks again!
from two.js.
Related Issues (20)
- [Question] Woscope integration HOT 3
- How to animate millions of points on browser canvas using two.js HOT 12
- wrong type in getPointAT declaration in path class HOT 2
- "Dom-less" start for just generating result svg [Enhancement] HOT 1
- Can two handle thousands of svg path elements and hundreds of thousands of points? HOT 1
- [Enhancement] Add Path.Compound Static Method
- How to check if an object is currently being hovered by the mouse whilst taking rotation into account? HOT 3
- Two.Utils.read.path throws an error HOT 3
- Smooth out lines and Round Corners HOT 2
- [Bug] WebGL Renderer Blurry HOT 5
- Partial Ellipse HOT 6
- Text `BoundingClientRect` in nested groups HOT 2
- compile error typescript[Bug] HOT 2
- svg fill-opacity [Bug] HOT 12
- Issues with Zoom and ZUI when upgrading from version 8.1.1 to 8.11 (latest) HOT 3
- creating curve path using anchors and make path not working ! HOT 2
- [Question] Best way to render ~250k polygons HOT 6
- Text Baseline in SVG Backend HOT 5
- [Bug] Negative scale does not work, with webgl mode only HOT 1
- Can i add events to shapes if renderer is Two.CanvasRenderer HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from two.js.