I had an idea for a WebOS, but it requires detecting drawn shapes. Ie: I want a user to be able to draw an image, then draw a big box around the whole image. Then the user can drag that box by the grabbing the border, and moving the whole image around. This requires that I be able to detect when such a box has been drawn, and turn it into a Rect type. Anyone have any pointers or tips on how to do this? I don't even know where to start.
There are Canvas functions for getting the pixels in a rectangle. But these functions do not work in IE (even with excanvas.js). Is that what you want to do?
You can attach mouse events to a Canvas, or to a div containing it.
If you could explain what you're trying to do exactly, I might be able to offer more help. If I understand you correctly, I think you could you what you're talking about if you don't care about Internet Explorer support.
Related
I'm trying to create an image editor that can mask personal identifiable information. We're using konva right now to add black Rect shapes over images, but we would love to use the blur or even pixelate feature. Im not sure I'm going about this right, can anyone help me out? Here's a sandbox
UPDATE
Ok I was able to figure it out. Instead of trying to blur a transparent Rect shape on top of an image (which will just blur the transparent Rect, not the image behind it), I needed to get a little more clever with how this worked. My solution was to keep the original image as is. Keep the black rectangular shapes working the same way, but change their fill to transparent and set a stroke color only while they were selected. These will act as a way for us to set and interact with the redacted parts. Then for each shape that was created, I created a new full-size and blurred version of the image layered on top of the original image with a parent Group that had a clip path set to the bounds of the shape.
Here's a link to the updated sandbox
It's not 100% perfect, for some reason the selection is behaving a little funny (it's working alright in our production app ¯\_(ツ)_/¯). But hopefully this is a solid enough ground for anyone else to get up and running with a redaction tool!
Would love to see if anyone has any suggestions for improvement!
I use the KineticJS getIntersection() function to dictate whether a click/tap is made on an element from one of a few layers in my canvas, and it works fine as long as I don't move the canvas or zoom in. Once I do either of those things, it seems like the hit graph gets messed up. Anyone dealt with anything like this before?
Thanks in advance for any help.
I have an HTML chessboard with chess pieces, and everything works. In order to avoid the drag & drop tediousness, I made the chess pieces background-images. On mousedown, I remove the piece at the position, and on mouseup I place it back. The only thing that is missing from the aesthetic is the image of the piece to be displayed under the cursor in-between.
I tried this:
cursor:url('http://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg'), auto;
But there are several setbacks with this method.
The image cursor needs to be at most 32x32 pixels in order to guaranty compatibility
It's unclear whether the format I want will be supported at all.
I don't know if the cursor image has width and height properties, meaning I cannot resize the image so that it looks exactly like what's on the board.
The cursor position is top-right, whereas it should be centered-centered, since chess pieces are... well, held from their center.
The big question is whether there's a workaround to all of that. Is it, for instance, possible to make a canvas that appears under the mouse?
Unfortunately, you cannot modify cursor properties, like width/height or position...
But, I have found interesting article how to imitate cursor with div element.
http://www.ajaxblender.com/howto-create-custom-image-cursors.html
Hope this helps you!
I need to display a very long area (without defined length) with many polygons (simple shapes - circles, squares, some text). Obviously I need only small fragment visible at a time. Main problems are efficient scrolling and handing mouse events. I write in GWT. Things i considered so far:
1) canvas. create a canvas with the size of visible area. Create buffer canvas larger then visible area. Render to the buffer (only changes - if something is changed in the visible area or new parts to the right/left during scrolling). And when required, render proper part of the buffer to visible canvas. This seems to work fast enough. But! I have to implement this smart buffering, decide which part needs to be rerendered and which not. And I need to remember all object to detect mouse clicks and mouseovers (and it should be some nice structure like interval tree or segment tree, as mouseover checks are very frequent - but this is already implemented in the browser, sounds like reinventing the wheel) - this is A LOT OF WORK!
Maybe there is something ready?
2) html (divs/images) - so, the idea is to render all elements with divs and images (images can be generated on canvas first, doesn't metter). Position them absolutely on a long div and use browser scrolling to scroll the div. Works until you reach the end of this long div and you need to reposition everything so there is more space to scroll (and this will freeze scrolling for some time). So maybe it would be possible to render in a second div in the meanwhile and then switch them.. It might work, but this sounds like a hack and it will probably have serious problems with multiple objects visible at a time. Plus for mouse events implemented in the browser.
3) SVG - I haven't tried, but I think I will run into the same performance problems as with html/divs (when scrolling to right/left)
Any ideas? Which approach is the best? Is there anything better? WebGL (it won't work in IE and porting to IE would be hard prob). How should I implement this?
You seem to understand the pros/cons. Canvas is faster, but it's lower level, so it's harder to code. DOM is slower but easier to code because of its event handling and object access. If DOM is too slow, you have to resort to canvas.
One possible compromise is to render the full canvas and clip it using overflow:hidden. That's what I did on a waveform display I am working on.
SVG should be easier than the DOM for shapes. Since SVG is not completely cross browser, you should use something like http://raphaeljs.com/
I would go with canvas as it's relatively fast.
As far as off-screen positioning, mouse events, and re-rendering — it could be all taken care of by using canvas library like Fabric.js. Take a look at the demos.
Event inspector demo & working with events tutorial might come in useful.
Off-screen (not) rendering is taken care of by default. Just position objects at off-screen coordinates and they won't be visible.
How do I prevent a user from seeing a certain parts of the page. My goal was to make a huge maze within the browser (so big that the path is big as the width of the browswer screen); the user has to navigate using the scroll bar or any other scrolling method until they find the end of the maze. Making the maze is not the challenge, but to prevent the user from crossing over the boundaries is where I am having trouble.
My thought process is to make objects/areas on the page that block the user from continuing to move in that particular direction. Maybe the user can see 50px of the block/area before he can not go any further? I have never seen this done and I was curious to know if this is even possible.
Thanks in advance. Any help or advice will be appreciated.
Maybe that won’t be that answer you were looking for, but if you have some experience in graphics, you can try to use three.js library to generate the maze with canvas or webgl. You can use point light to lighten only small part of the maze. Other part can have something like “fog of war”.
If you are not interested in canvas/webgl, then you can try to use an overlay png image with transparent hole in it. Width and height of the image has to be screen.height*2 x screen.width*2 (not sure about that, but that is how I see it). That image should be on top of whole maze. It’ll hide whole maze except for that under transparent area. And your starting point should be in the center of that transparent area. Then you need to move that image along with user input (arrow keys, mouse, whatever). Alternatively, you can move maze itself. This way overlay image can have screen dimetions.
These are two option that came to my mind.