I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
Related
Good morning/evening, hope you're having a great day. I had a problem I've been postponing for the last couple of months.
Short Question: Is there a way I can make my website scale, everything in it scale, from text to images, to tables,... when the window size is changed?
Long Question: I've been working on a program that is similar to PowerPoint, I have been giving a lot of webinars/events in my local area and PowerPoint isn't that good for programmers, or if you want to use it for teaching, there is a lot of repetitive things I can automate with programming. Now I have one problem, I just can't figure out what can I do to make a presentation scalable just like how PowerPoint is doing so, I had an idea and that was just to create each slide as an SVG image, or at least use an SVG tag but with the ForeignObject tag and just stick my HTML code in it, but that is ugly coding and will lead to some trouble. On the other hand, if I ditch SVGs and use something like media queries for adjusting the font size, it wont work, since the font will not scale nicely and some text may go to the next line and you know what I mean.
Is there anything I can do about this? I know that this question is too lengthy and I'm sorry. I can code in HTML, CSS, JavaScript and (soon React) if that helps.
I'm working on building a sort of "word cloud" in the browser using html and javascript. The idea is to have a while bunch of words on the screen each one maybe with a different size or different color.
Issue is that I may need 100k+ words on the screen as it is a big area that will be covered. I have attempted to do this using pure html, using span elements with different styles for each word. However this approach makes the browser choke as I assume it is rendering too many DOM elements. Approaches using tables and divs were also unsuccessful.
I am wondering if I am approaching this the wrong way? I suspect there is a more performant way to do this, perhaps using canvas or svg, though these will require more work to integrate I would assume. I also want the user to be able to interact with some of the words such as deleting them or changing them. This makes the html approach seem easiest.
Any help or pointers would be appreciated!
I would like to find a way to create two perpendicular lines, crossing at the cursor position and spanning across the entire canvas. Since I'll be presenting some complex and rather chaotic fully-meshed diagrams to the user, I want to give them a way to quickly find the cursor.
What is the best way to achieve this in JavaScript?
My Problem is: I'm still new to JavaScript and the endless libraries that are available for this kind of stuff so I really have no clue what's best to use. I found a similar question for QT GraphicsView here and was wondering whether there might be a library or script out there that can achieve the same.
Thank you in advance.
I want to make a moving man in css/html/javascript, also detect collisions with other objects. Any idea how to do it? or any pointers to the same will do great.
The first try is look at rapahel js project it uses canvas, second it is a pretty hard thing to do as you want your own physics engine at 2 D level, but i guess with some math formulas you could do it, but everything that you need as an object should be scripted in js to be sure to get the collision effect.
Some design patterns should help you to make your code better.
Good luck.
Pretty much any basic game tutorial covers the topics you asked.
If you can't find a javascript version of that, just get anything in a language you are familiar and try to code the same thing in javascript.
to draw things somewhat in the same way these tutorials probably do, use a div with "position:relative" and its children with "position:absolute" and use "top" and "left" css style proprieties to position the boxes/sprites/whatever.
I am pretty sure you can figure out what to do if you follow these tips.
1.) I found a canvas API called EaselJS, it does an amazing job of creating a display list for each elements you draw. They essentially become individually recognizable objects on the canvas (on one single canvas)
2.) Then I saw on http://simonsarris.com/ about this tutorial that can do drag and drop, it makes use of a hidden canvas concept for selection.
3.) And the third approach, a working approach, http://www.lucidchart.com/ , which is exactly what I'm trying to achieve, basically have every single shape on a different canvas, and use to position them. There's a huge amount of canvas.
The question is, what is the easiest way to achieve interactive network diagram as seen on http://www.lucidchart.com/
A side question is, is it better to get text input through positioning on canvas or using multiple canvas (one for rendering text) as in LucidChart
I'm the person who made the tutorials in 2. There's a lot going on here, so I'll try to explain a bit.
I use a hidden canvas for selection simply because it is easy to learn and will work for ANY kind of object (text, complex paths, rectangles, semi-transparent images). In the real diagramming library that I am writing, I don't do anything of the sort, instead I use a lot of math to determine selection. The hidden-canvas method is fine for less than 1000 objects, but eventually performance starts to suffer.
Lucidchart actually uses more than one canvas per object. And it doesn't just have them in memory, they are all there the DOM. This is an organizational choice on their part, a pretty weird one in my opinion. SVG might have made their work a lot easier if thats what they are going to do, as if seems they are doing a lot of footwork just to be able to emulate how SVG works a bit. There aren't too many good reasons to have so many canvases in the DOM if you can avoid it.
It seems to me that the advantage of them doing it that way is that if they have 10,000 objects, when you click, you only have to look at the one (small) canvas that is clicked for selection testing, instead of the entire canvas. So they did it to make their selection code a little shorter. I'd much rather only have one canvas in the DOM; their way seems needlessly messy. The point of canvas is to have a fast rendering surface instead of a thousand divs representing objects. But they just made a thousand canvases.
Anyway, to answer your question, the "easiest" way to achieve interactive network diagrams like lucidchart is to either use a library or use SVG (or an SVG library). Unfortunately there aren't too many yet. Getting all the functionality yourself in Canvas is hard but certainly doable, and will afford you better performance than SVG, especially if you plan on having more than 5,000 objects in your diagrams. Starting with EaselJS for now isn't too bad of an idea, though you'll probably find yourself modifying more and more of it as you get deeper into your project.
I am making one such interactive canvas diagramming library for Northwoods Software, but it won't be done for a few more months.
To answer the question that is sort-of in your title: The fastest method of doing interactiveness such as hit-testing is using math. Any high-performance canvas library with the features to support a lot of different types of objects will end up implementing functions like getNearestIntersectionPoint, getIntersectionsOnRect, pathContainsPoint, and so on.
As for your side question, it is my opinion that creating a text field on top of the canvas when a user wants to change text and then destroying it when the user is done entering text is the most intuitive-feeling way to get text input. Of course you need to make sure the field is positioned correctly over the text you are editing and that the font and font sizes are the same for a consistent feel.
Best of luck with your project. Let me know how it goes.
Using SVG (and maybe libraries as Raphael)!!
Then any element can receive mouse events.