I need to create some kind of simulation for example sorting algorithm on canvas. I need a JS framework which allow to transition or path transitions of some elements (i have no problem to calc coordinates), I don't want to use paperjs because I need simulation stepping (for example two elements switch) and use onFrame it's quite overhead for me, because I don't want to anything so much difficult, i need it for simple demo.
Have you looked at D3 (http://d3js.org/)?
Here is a blog post on using D3 with canvas http://bocoup.com/weblog/d3js-and-canvas/
Related
I'm working with a small group to build an interactive interface that will render a list of nodes and show how they are connected, almost like how some database modelers are. This is within a pre-existing application, and we will have up to a couple thousand data points that should be able to be dragged.
Some people have mentioned using a canvas element or packages like Konva.js or D3. I'm wondering if options like using a canvas or React-Konva would be able to handle something like this, or if we would need to go with an alternative like D3 or something else. Does anyone have any experience or knowledge about this?
It depends on what exactly you are going to draw and what kind of interactivity you needed. For Konva it may be hard to handle a thousand data points. But there are many Konva Performance Tips to improve the performance.
If some parts of your drawings are static, you can use layers or node.cache() method to boost the performance.
The only good way to know if a tool (Konva, D3 or anything else) is good is to make a prototype version of your app. Make a very simplified version with a lot of objects with every framework/library. And see what works best for you.
I am wanting to create a circular slider in React Native for a project of mine. Although I am not entirely sure on how to create one. Could someone help me out?
Here is a little sketchup of what I want it to look like:
I did some searching on the interwebs and found some posts about circular sliders in React Native. But these posts seem to be dated and the projects linked/provided in these posts would not work for me.
1. https://stackoverflow.com/questions/51058669/react-native-circular-slider
2. https://stackoverflow.com/questions/38253804/how-to-make-a-circular-slider-in-react-native
Note: I am fairly new to the world of React and React Native but do have decent experience with JavaScript. Right now I am still learning about React and React Native.
Your best best is probably svg via react-native-svg, since that will allow you to declaratively draw and animate arbitrary shapes without having to write platform-specific native code.
Note that setting up react-native-svg is slightly different if you are working with expo or have ejected, which may explain why some of those older examples you mentioned don't work (they pre-date expo).
Drawing with SVG is generally straight-forward, although you will need to use arc's in paths, which is about as awkward as SVG gets (but still not too bad).
The trickiest parts of a circular slider are capturing the touch input with PanResponder and converting coordinates between cartesian (x,y) coordinates of the touch input and polar (angle,distance) coordinate systems in order to know where to move the slider to.
In your case it looks like you want to lock the movement of the slider to specific increments around the clock so you'll also need to find the nearest increment to the polar-coord of the current touch, but that should be easy in polar coords - just find the increment with the closest angle to that of the touch.
Here is an Expo project that illustrates the slider part. It looks like this:
Based on the comments, if you are comfortable with the jQuery roundSlider then you can simply do the customization based on your need. Here I just make a mock up design, check the below demo:
DEMO
Also if you want this as an React component then you can make a simple wrapper like below, and can directly use in any React applications.
https://stackblitz.com/edit/react-jquery-round-slider
hope this will helps you, or will give you some idea to move in a direction.
This is the first time around that I am using some js,otherwise I always rely on hardcoding.Probably this is the reason why I am facing some issues in understanding the syntax of kineticjs.
I saw some
1. Tween
2. layer(add)
3. stage(add)
4. var rect=new kinetic.rect{//some code with property:value,}
I am familiar with constructor and creating instances of it.But I am finding it difficult to understand the syntax of kineticjs.What are the above things used for,i have no idea.I tried searching but I din`t get what I was looking for.
I have a project in which I need to increase the height of bezier curve with transition.Kineticjs seems to be the only solution for this.
So my question is how to define my own custom function in kineticjs and how to call it with respect to the kineticjs syntax?
this is what I have done so far!!!
Tweens are used to animate a node from one state into another state. For example, you can use Tweens to animate a rectangle from position x=10 to x=50
this adds a node to a layer. You can add groups and shapes to layers
this adds a layer to the stage. Layers are tied to an HTML5 canvas
this instantiates a new rectangle. Here's the full documentation on rectangles: http://kineticjs.com/docs/Kinetic.Rect.html
For more info, take a look at the "how it works page"
https://github.com/ericdrowell/KineticJS/wiki
Try to watch this youtube video. Its a presentation from the founder of kineticjs. He talk about HTML5 graphics frameworks in generale in the start, but if you go to time 39:45, then he talks about exactly the things you are asking about. He is giving a live coding example which makes it very easy to understand. Check it out:
http://www.youtube.com/watch?v=ZS6QqNJ0VRA
I'm making an application with d3.js, but I'm driving a lot of data and graphics are way too big, which is slowing me much navigation.
Could someone tell me what could be a solution or a way forward.
This is the application. http://www.ingeniosolido.com/s2m2/prototype30/line_zoom_actual_30_interval.html
This is the code.
https://gist.github.com/3854943
It does not look like you are doing a lot of element specific interaction. You might consider rendering to canvas. See: HTML5 canvas alternatives for d3.js, graph visualization library
Have you tried to remove some (read: most/all) of the clip-paths? It's almost always faster to not use clip-path (unless it clips away expensive areas, e.g filters, opacity, complex geometry and so on).
It looked a bit like you could at least move some of the clipping up a level, to be on a parent <g> element for example.
Also, the svg you link to doesn't really qualify as big markupwise.
I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.