I'm trying to develop a very simple sketch program that can draw the dimensions of buildings. For example, if I want to draw a 24'x24' house, it would simply be a square with each side representing 24'. I've read that SVG/Javascript may be ideal, but I'm looking for some specific guidance.
Here is a link to a 30 second video showing exactly what I need: https://vid.me/96Mz
I'm able to draw those shapes by clicking in one spot and then moving the mouse to another location to draw a wall, then click again to produce a third corner, and then a final time to close the shape. I'd need the area to be calculated too.Preferably the dimensions of each side would be able to be shown as labels.
Here's an example of an image I'd like to be possible:
Click Here
Can you think of anything to help me build a simple version? Any feedback is huge, thanks a lot.
Related
I've got a assignment where I need to create a 3x3 grid of rectangles, where a person can click one of those rectangles and the page zooms in on that rectangle, so it's now screen-filling.
I've got that working in Angular 6 by just using their animation system and doing transform: scale(3) and a translateX/translateY, depending on which one of the rectangles has been clicked. So, no problem there. (see the gif below)
However, I also need to create 2 or 3 rectangles, that are shown before the grid is shown. So, when the user visits the page, he first sees 1 rectangle, filling the screen, clicks on "next", and then sees the grid.
Basically, I want to have a "top-down" view of my DOM, being able to zoom one of the rectangles or zoom out and see the grid.
I was thinking about ditching the DOM and using three.js or pixi.js, but since I'm on a really tight deadline, I thought about coming here and asking you guru's what you think is best.
So, what's the best way to create a whole bunch of rectangles and be able to zoom in, out, and move around between them? Thanks a lot in advance!
Please, if you need more info, leave a comment :)
I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.
So here's a possible use case. I'm building a website to help city planners test parking availability.
The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
The website script tests the selected polygon area for parking availability.
When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)
(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)
All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.
Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.
I would draw and rotate in a <canvas> and then out that on.
EDIT:
place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.
I'm currently working on a Polar Chart that sits on top of the Google Map API. When you click a segment it zooms in, the polar chart disappears, and it shows the individual points within that segment. Here's a preview of it so far:
Everything works as expected from a technical point of view, I just need to make a couple of modifications to make it more useable:
1) Is it possible to get it so a user can click anywhere within the segment to trigger the next stage. At the moment you have to click the blue areas meaning it's quite tricky to click the smaller portions, especially when they're overlaid with labels.
2) In the example above, you can see the y-axis labels are all a bit squashed when nearer the centre. Ideally they'd be centred within the middle of the segment. Is it possible to position them in the centre of each segment?
Any help appreciated on this. I've gone through pretty much every option in the documentation so am suspecting I need to go one step further and maybe look at modifying the DOM directly.
Thanks in advance :)
I'm making a tile-based browser game using Sprite.js to interact with canvas. https://github.com/batiste/sprite.js/
Here is what I got now(PC version has a larger visible area):
http://www.youtube.com/watch?v=l3c-cmWUVrc
It is not easy to redraw every tile each frame because of performance, so I tried to make a scrolling surface background using scrolling.js that comes with sprite.js. There is an example here http://batiste.dosimple.ch/sprite.js/tests/test_scrolling.html The example works, but it seems like ScrollingSurface.update is buggy or there is something I'm missing.
What I tried to do is to draw 5x5 tiles and after 5 seconds draw another 5x5 tiles near the first ones. But it draws only the first ones. And surface.update() only updates the position of surface. Here is my code https://github.com/Sektoid/sprite.js/blob/master/tests/test_scrolling.html (You need also to set this.divider = 1.0 in scrolling.js if you want to avoid drawing the same tiles 4 times.) There aren't any sprite.js-forums like with the other sprite- and game-engines have, but it is fast and very useful. Take a look at it! And help me please :)
I have been trying to find a good resource to point me in the correct direction and I'd really like someone to help me in this regard.
I'm developing an app that uses phonegap, js and html5. One component of this app is to have an image that can be overlayed with freeform scribbles.
I'm not sure if its the canvas object I should be using and if so how do I go about implementing a drawing solution.
You create a and position it absolute over image.
can have transparent pixels (alpha=1.0) and those pixels will display the underlying image.
Then you flip pixels accordingly your scribbling to black etc. You need to listen to touch events, transform their coordinates to coordinates and then use canvas.getContext() draw operation to manipulate pixels hitting in those coordinates.
If you need further assistance please ask individual questions for each part as a complete solution would be longish source code and outside the scope of simply answering the questions.