I am trying to make an 'Eraser' for my fabricjs-based 0.5 Opacity free drawing app(with non-trivial background image), i. e. everything drawing is half-transparent and we still can see the background through the free drawing.
However I understand by default all free drawing are 'path-based' i. e. everything we draw (between mouse-down mouse up) is captured as an individual path in the canvas, so it is not possible to erase arbitrary part of the path. So I am thinking maybe we can capture the mouse-down/up event manually and draw an image pixie by pixie and place it on the canvas with opacity=0.5? so that we can use white to overwrite all those 'old' drawing?
Is this a workable/efficient enough solution?
However I am not sure how this can be implemented in fabricjs? could you please give me some advise on the steps or some pseudocode? thanks
I didn't complete my attempt when i had a similar problem , but the basic concept was simple 'Read the pixel under the cursor(and under the canvas, where another canvas with a background image was) and paint the path with the same color' , creating an eraser effect. The starting stone was this jsfiddle.net/DV9Bw/1/ maybe it can help you out, i didn't try it to its completion since the idea was quickly abandoned
Related
I'm having trouble understand how DisplacementMapFilter works. Basically, I'm trying to create a revolving planet through a combination of fisheye/masking.
Also, how do I go about doing this via timeline? I'm not too familiar with coding within it, but this is more of an animation project than anything else, so classes are out of the question. Sorry for the lack of code -- I'm simply stuck.
As noted in the comments above, this probably only answers half the problem;
Generating a displacement map image isn't too difficult with the right tools. I'll assume you're using Photoshop, GIMP, Fireworks, or similar.
It's probably best to work on a 128x128 image or smaller with this method. Some editors have more specialised tools which let you work on pretty much any size of image, but this is a generic process that needs no special tools. You can always enlarge the end result, but the quality will begin to go down.
Start with a gradient fill. It should go from pure black on the left to dark red on the right (specifically 128,0,0). Add a vertical fill from black at the top to dark green at the bottom (specifically 0,128,0), and combine them with a LIGHTEN or ADD filter. You should now have an image which has black, red, green and yellow corners. Flatten it.
Copy this image to another layer / whatever the term-of-choice is for your editor. Apply whatever displacement filter you want to it (maybe a fish eye, maybe a manual smudge, maybe a perspective transform, anything)
Add a third layer between the two. Flood-fill it with dark yellow (128,128,0) and set it to ADD / ADDITION blend mode. Set the top layer to SUBTRACT / SUBTRACTION blend mode.
That's it. You should get a mostly yellow image which will function as a displacement map.
Update:
To use this in the example program (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DisplacementMapFilter.html#includeExamplesSummary), replace the createBitmapData function with this:
private function createBitmapData():BitmapData {
return myBitmapObject.bitmapData;
}
where myBitmapObject is the instance name (I think) of your displacement Bitmap. There are tidier ways of setting that up, but this is the easiest.
In my web application I want the user to be able to draw some rectangles on an image, also change the size of the rectangles and drag and drop them. after that I have to get coordinates of rectangles and send them to server's database
Is it better to create a canvas on a photo or load the image in canvas ?
I don't write any code yet because I have no idea how to do this.
Any ideas,suggestions,links,libraries ?
As the comment said canvas is a good bet for this, but you'd need to do a fair bit of coding to get it working.
I actually have a tutorial on making Canvas interactive by drawing rectangles and moving them around. It should give you a good start on this project.
There are also a few libraries, such as fabricJS, but that might be hard to get the coordinates out of without digging into the library.
I'm new to canvas, so pardon the beginner question. I'm trying to animate a square on a canvas that changes colors, rotates, and scales up and down (this is just for practice). I'm just trying to grasp all of the concepts and create an example that does all of them at once.
What I want it to do is scale up to a certain amount, then once it reaches that amount, it scales back down to the beginning amount (and then repeats). The same goes for the color (continue animating, then go backwards through the colors). How can I accomplish this?
Here's an example of my code that I wrote:
http://jsfiddle.net/ggsFJ/1/
You'll notice a couple bugs:
Once the color gets to yellow, it stops animating.
The scaling obviously doesn't work.
The rotation isn't either clearing the canvas fast enough or something, because it's showing a trail of positions.
Where can I find some resources on accomplishing this? Any help is appreciated.
There's one small problem that's causing all the other problems (well, apart from the yellow - I'm not experiencing that particular one):
ctx.restore;
That line does nothing. You need to call ctx.restore using parentheses. Once you do that, the scaling works, and clearRect() will clear a non-transformed rectangle:
ctx.restore();
And here's the updated demo.
The problem I can see is with your restore method call.
You are just saying ctx.restore (possibly by mistake). It should be ctx.restore();
this.context.drawImage(myimage, 0, 0);
Putting the image on the canvas is pretty well covered all over the web.
But how do I remove it after it's there?
Canvas is an immediate drawing surface. This means that you execute a command on it (drawImage or fillRect) and it does that command, and it doesn't give a damn what has just done. There is no undoing of something.
You had a hard time searching for it because there's no such thing as "removing" for a Canvas. All it knows is that it has some pixels of some color from somewhere. It has no idea where.
To simplify a bit, there are generally two ways:
Clear the entire canvas, and draw everything all over again EXCEPT the one image you do not want drawn
Use two canvases, one that only has the image and one with all the other stuff. Clear this canvas with clearRect(0,0,width,height) and you're done.
You'll notice in 1. that you will probably have to start keeping track of the things that you draw on canvas if you want some of them selectively removed or repositioned. Instilling object persistence, or rather turning canvas from an immediate drawing surface to a retained drawing surface, is something that a lot of canvas libraries do. If you want to do it yourself, I've written a few tutorails to help people get started.
If you want to look into libraries, take a peek at easel.js. It's pretty learnable.
Option 1:
Draw a rectangle over it of the same color as the background.
Option 2 (works for non-trivial background, but slower):
Get the pixel data from the canvas before drawing the image, then redraw that pixel data to remove the image.
So I came up with a quick and easy way to clear my canvas. I just put my <canvas> tags in between <p> tags with an Id, then each time i needed my canvas cleared I just rerendered my <p> tags by changing the innerHTML, works like a charm.
I'm using KImageMapEditor on Linux (Ubuntu) to create an image map. The shapes in the image are a little complex so I'm using the freehand tool to draw them. However, this is really the same as the polygon tool so the shapes have ended up with a lot of points, which has made the HTML pretty huge.
Does anyone know of a way to reduce the complexity of the shapes, like "smoothing out" the lines?
I should also mention the reason I want the shapes to be fairly accurate is because I'm intending to do something like this, where each shape is highlighted on mouseover: http://davidlynch.org/js/maphilight/docs/demo_usa.html
Since users aren't going to click to the pixel, give them some leeway and create a "sloppy" map which roughly outlines each shape instead of clinging to the actual pixel outline.
This is in the same way as you don't expect a click on a link to fail just because you click on the background which shines through the text. You expect the bounding box of the text to act as the click-able area instead of the "black pixels".
Algorithm: Given three consecutive points, eliminate the middle point if the angle created is less than some tolerated error e.
Polygonal path simplification with angle constraint