After not finding anything I like with regards to this question I'm looking to build my own in-browser graph editor. As a first step, I'm looking for a Closure based library to draw objects on a canvas where so I can do things like update an objects definition and trigger a redraw without to much complication.
From a breef look this lib looks to do what I want but I see nothing indicating that it's intended to work with closure (and in fact seems to be targeted at jQuery).
It seems the question is to spesific: the standard closure libs contain goog.graphics supporting general drawing primitives that white washes over the difference between canvas, SVG and VML to give a general retained graphics mode effect via each. goog.graphics.createGraphics selects the 'best' implementation based on what platform is being used.
Related
Examples of what I'm looking to do:
I've been looking for a tool to manipulate a loaded svg path and polygon as I can use Snap.svg Free Transform for resizing and rotating.
Well I couldn't find a library besides Paper.js that allows me to have interactive editing of Bezier curves however I don't want to work with canvas at all JUST SVG and I couldn't find anything for the SVG element.
I'm still super confused as all I can find via Codepen and Github are demos in which the svg objects are inline HTML and the Javascript is targeting the inline HTML that wasn't dynamically added.
I know there are libraries like Vector.js, Snap.svg or SVG.js that I maybe able to use. However while reading up on the API's I know SVGGeometryElement has a method getPointAtLength() which returns the point at a given distance along the path.
My question is first is there a js library that allows me to have interactive editing of Bezier curves both fill and stroke? If so where and is there a demo to help me understand how to use it? If there isn't based upon what I want to do which is to to ONLY work with SVG what library of the 3 is the best and why?
The getPointAtLength() method is not useful for your needs. You need to be able to access a list of path commands and their parameters. But getPointAtLength() is not that.
SVG has an old API for accessing path segments. However this is deprecated now, because it was somewhat ugly and difficult to use. I'm not sure which of the browsers, if any, still support it.
There is also a new API that has been proposed in a new SVG Paths module.
I've lost track of which browsers have removed the old API, and which have implemented the new one. You'll need to check.
If you want to be backward compatible, Philip Rogers has created a polyfill library for the old API.
If you get desperate, there are other libraries for parsing path definitions that you could use. For example: https://www.npmjs.com/package/svg-path-segments. Note that this is not a recommendation. I have not used that library.
Afternoon. I have an FLA with a single MovieClip on the stage - the clip is named myThing in the Library and also has an instance name of myThing. On another layer I have the following script:
this.myThing=this.getChildByName("myThing");
console.log(this.myThing);
When I run this in a WebGL project it works as I'd expect and returns a JS object but when I run the same thing in a canvas project (which is what I need to use) it comes back null.
Initially, can anyone explain what the difference is between a WebGL and a canvas project in Adobe Animate CC and how I can get a reference to child clips to control their timelines?
Along with that, can anyone point me to any decent resources on scripting these projects? It seems like no matter what I search for I always end up back at that *!#%£¡ rabbit tutorial that manages to cram very little info into an awful lot of words.
Thanks all, your help is always appreciated :)
So I was being a numpty.
The name property of any asset defaults to null. This is not a problem because the getChildByName() method is not really necessary (for me at least) once I realise that you can just call this.someChild.someMethod().
I got hooked up on the wrong approach because it was the only one I could find examples of. I'm still finding documentation very sketchy and not very helpful when compared to AS3 or even competing JS libraries like Greensock
Also not sure why my first approach worked in WebGL but not canvas. Ah well, onwards and upwards...
WebGL and HTML5 Canvas documents work somewhat differently in Animate CC.
In WebGL, symbols having instance names are accessible as follows:
var mySymbol = this.getChildByName("instance-name");
In Canvas, the same can be done as follows:
var mySymbol = this.instance-name;
Unnamed instances can be referenced using this.getChildAt(index) in both canvas and WebGL.
Once a reference to the required instance is obtained, you can easily control it as desired. (gotoAndPlay()/Stop() etc.)
PS: In canvas, Symbol-instance names are not explicitly set as name properties of corresponding symbols in the output - hence the name property is returned as null.
A very common question, but almost all comparison I've seen is mainly focused on games with a lot of interaction.
What I'll be working on is a web application that manipulate objects one at a time. For example, the object can be either an image or a text, then it can be replaced, resized, rotated, zoomed in, and deleted.
If the manipulations applied to many objects, I know that canvas will be a better choice but here the manipulation only can be done one at a time to one object only. Each container will at most have about 30 object in it, and I'll be working on multiple containers (maybe around 20 containers) that will be hidden or shown depends on the interaction.
The question is whether to use Canvas or CSS3? What I'm looking is the performance issue and complexity of the app.
I don't have a lot of experience with canvas but as far as I know if you use it together with requestAnimationFrame the performance is pretty similar to CSS animations. You should also consider that CSS animations are very limited when it comes to working with complex animations.
I have been recently into developing more with html5 canvas & as I see, it is more of JavaScript. So when should it be preferred over plain html? All I want to know is that given that I have to develop a game say like pacman, which one should be better to use? (May be for drawing applications canvas is a lot more helpful than using divs)
For example here are two implementations of pacman
Using divs' and javascript
Using html5 canvas
I would like to know the pros and cons of developing a browser game with canvas & with html div's and js. Also I want to know when is it better to use canvas & when is it better to use plain html & js.
if backwards compatibility isn't a concern, use a <canvas>, this is exactly what they were designed for.
An array of pixels is far more efficient than creating a DOM element for every single dot on the page.
I believe one of the major distinctions between the use of canvas or html (dom) for something like a game is the trade-off between the dom helping you to mangage your objects by providing the mouse events to hook, or you managing them in JavaScript yourself.
You need to handle all the mouse events yourself if you use canvas for a game, there are libraries to help you do this, one such library is EaselJS. This library will help you to easily add listeners to your objects in canvas.
Obviously not needing to have all your objects in the dom, you get a massive performance benefit if you require any scrolling etc. Take the Google Maps fusion tables layers as an example, they can render 1000s of markers on the map using canvas and maintain a great user experience, this was something that just wasn't possible when using the dom.
So its all about the trade-off, libraries and more code to manage your objects in canvas - but reap performance rewards, or ease of development in html (dom), but possible performance hits for many objects.
For a simple 2D game I would go the canvas way.
For 3D games you will have to take a look at WebGL ( which is a native browser implementation of opengl ) and probably a webgl engine like copperlicht which will wrap the webgl api for you. You can also do 2D games with WebGL, and if your 2D game is graphics heavy, webgl would be faster than canvases.
Of course there is also the Flash solution, but I would not go that way.
edit: theoretically you can also make 3D games with just canvases but that would mean reinventing the wheel ( transformations etc. )
HTML and DOM for graphics are slow, but they will work in older browsers.
Canvas is very fast, but does only work in modern browsers.
So, if your target group is modern smartphones or modern browsers, then definitely go for canvas! Moreover, if you need certain special effects or particles, then there will be no other way than to use Canvas, since this cannot really be done with the DOM.
Perhaps SVG might be an option for you? It is not as messy as pure html, which is not suited for games, but provides better browser-support. There is also a good framework for SVG: Raphael. I myself used SVG for some game-implementations. (risk, tetris...)
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).