I have a squared formed image. I need to add perspective view to it and then make an animation that will restore image back to square view. This actions must work at least in all newest versions of browsers and without Flash.
I have tried to do this as follows:
Using RaphaelJS I can only clip image (create path and set fill to image url), not add perspective.
Canvas works as svg and vml in RaphaelJS... I can't add perspective with it's help.
CSS3 3D animation method rotateX adds perspective, but it is supported only by Chrome and Safary.
There is no way to add perspective to image using built in tools.
The only possible solution, I have found is using SVG add clip path to image - it doesn't add perspective view, but it's the best possible solution.
As I understand - we can use Canvas to add perspective, but you must write your own javascript algorithm to transform plain image to perspective view.
Related
I am attempting to create a view for Android whose background appears to blur the view's content for which it is on top. This is nothing new and has been done before. I based my implementation on what was done here: Dimezis/BlurView.
The approach uses the pre-draw event from the view tree observed to draw a view to an internal canvas. The canvas is backed by a bitmap. A blur is applied to the bitmap before it is drawn to the canvas passed to BlurView's draw method. This approach works well for all standard views/controls and is a common method used to achieve the blur view effect.
However, it does not handle Skia-based drawings that may be on the view that is blurred.
Skia, via SKCanvasView, is used heavily for controls within the App so this is kind of a deal breaker if I cannot find a solution. The issue is very odd. Anything that is drawn on the canvas view appears to be scaled and translated when drawn to the internal canvas.
Screen-Shot - blur label v. blur SKCanvasView
The screen-shot show the difference in results from blurring a label with text v. blurring a red circle drawn on an SKCanvasView.
For reference, I've posted a sample project on GitHub. It can be found here: jaredballen/BlurView
I'd really appreciate any input that can be shared.
When you invoke _rootView?.Draw(_internalCanvas); the circle SKCanvasView is internally rendering itsself using _internalCanvas size (same as _blurView size) resulting in demonstrated behavour. My guess this could be solved by making _internalCanvas of the same size as the _rootView, rendering root view as blurred, then clipping and translating the result inside the smaller _blurView.
I'm looking into making a jigsaw game using html5 canvas and JavaScript. I have the images(pieces) in place, and they are draggable, but I'd like the pieces to act like they are on a grid so that when you click and hold while dragging an image it can only be placed on certain tiles within the 3x3 grid.
A similar question was asked on Stack before but the only response pointed to a drupal module and I'm not using drupal. I found one more similar solution online that uses Asp.net but I'm hoping to solve this all on the front-end, and if I have to use some server-side code I only know PHP.
The renderGrid function for canvas it seems, just draws a grid, but doesn't make it functional for snapping objects to certain places.
Does anyone have clues on how to do this?
Use divide/floor down math when setting coordinates. E.g. to space x for each 24 pixels:
var gridx = Math.floor(x/24)*24;
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.
I'd like to take an image and use it as a mask for a view on which I add numerous image views. I know of the quartz CGContextClipToMask() call but what would be the best way to approach this? Can I override the drawRect method of a container view, call CGContextClipToMask() within it, and then expect its subviews to adhere to that clipping region? It doesn't seem to work.
Do I need to instead add some blocking mask image over top?
Instead of subclassing or overriding drawing functions, I chose to overlay the images with an image that had transparency in the viewable portion. i.e., if my 'surface' was an image of a parchment, and I aimed to draw a bunch of images on it. I would have the parchment image, then a container UIView for any images to be put on that parchment, then a masking image over top of that which was the original parchment image but with the parchment itself converted instead to full transparency, while the surrounding area is left exactly as the background the parchment is on (then all other UI widgets over top of that).
This seems a viable solution in all cases except if one were to need some image to visually animate around and behind the parchment (not my case).
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image