is there a option to a animated resize with canvas in GWT? I use GWT 2.3. and plugins like GWTCanvas doesn't work with this version.
Btw.: I haven't found any tutorial or example on how to use canvas in GWT. Maybe someone has a good convas tutorial for gwt?
greetz, destiny
With GWT2.3 you don't need GWTCanvas, as the canvas support is present in GWT2.3.
Here are a few links
GWT's canvas Javadoc
http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/index.html?com/google/gwt/canvas/dom/client/package-summary.html
Sample application
http://code.google.com/p/gwtcanvasdemo/source/browse/#svn%2Ftrunk%2Fsrc%2Fcom%2Fgoogle%2Fgwt%2Fgwtcanvasdemo%253Fstate%253Dclosed
A tutorial
http://www.giantflyingsaucer.com/blog/?p=2338
There is no option to animate resize the image, you will have to implement your own function. To resize the image inside a canvas you need to use context.scale method, or context.drawImage(..) methods.
Related
I'd like to create a layered image for use on tvOS 9.0 using TVML markup.
This seems like it should be a relatively common problem, but there doesn't seem to be any way to do this (as of tvOS Beta 3). In the Apple TVML demo app it accomplishes this by using multi-layer images that are pre-compiled into a single .lsr file, rather than in markup with each layer separately noted.
It is possible to script the creation of .lsr files using the layerutil CLI program, but this would be a huge hassle for the app I'm trying to build where the images will be user-generated-content.
Instead it would be great to be able to do something like this (note the src-layer1 property for adding an extra layer above the base src):
<lockup>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" src-layer1="https://server.com/path/to/overlay.png" height="180" width="320"/>
<title>Rick Astley - Never Gonna Give You Up</title>
</lockup>
Is there any other efficient way to do this other than scripting a lot of back and forth to a server to generate a .lsr file?
Update - Oct 21 2015: At the bottom of this documentation page Apple provides a checkmark overlay image that would be perfect for this use called resource://button-play. But there still seems to be no way to use this icon overlay in TVML. :-/
You can use overlay for layering images in lockups.
https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/CoumpoundDisplayElements.html#//apple_ref/doc/uid/TP40015064-CH18-SW3
<lockup>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" height="180" width="320"/>
<title>Rick Astley - Never Gonna Give You Up</title>
<overlay style="padding:0;">
<badge src="resource://overlay-checkmark" />
</overlay>
</lockup>
If you continue to have trouble positioning the check mark overlay, try padding it with transparency so that it is the same aspect ratio as the video thumbnail.
I am trying to access the source code inside the canvas tag. Is it possible to get source code inside canvas tag?
You cannot get the source code from canvas element . You need to check the javascript to see what's going on in the canvas . Canvas is similar to board where you can draw anything with javascript .
The canvas element is part of HTML5 and allows for dynamic, scriptable
rendering of 2D shapes and bitmap images. It is a low level,
procedural model that updates a bitmap and does not have a built-in
scene graph
If you use Chrome you're in luck. It has an experimental feature for inspecting Canvas elements. So you can actually profile the canvas element and see step by step each call, and see a shot of the output of that call.
In chrome type chrome://flags/ into the URL and once the page loads, find "Enable Developer Tools experiments". Close out of Chrome and once you load it back up, in the inspector you will find a new option under Profiles for "Capture Canvas Frame". Run that and it will output a list of every call performed.
I learned about this through twitter and the following link, enjoy.
http://www.html5rocks.com/en/tutorials/canvas/inspection/
In my canvas I have an overlay image using setOverlayImage method from Fabric.js canvas library.
I have the need to place an IText object above my already set overlay image, but the IText object always appear behind my overlay image.
Is there some way to accomplish that using Fabric.js?
That's not possible. "OverlayImage" is an overlay over all other objects.
Why you need that?
Can you use "BackgroundImage" instead?
There is powerful HTMLLoader component for AIR wrapped in mx:HTML for Flex.
I want to supply images manually (ideally from bytes) for mx:HTML, which will display my generated content. The point is to pack all resources in the application without external files. I can pack different html pages in the app and switch them when mx:HTML dispatches Event.LOCATION_CHANGE. Now I want the same for images. What do you suggest?
Solved! Went through several stages:
Make HTMLLoader's background transparent with paintsDefaultBackground="false" and backgroundAlpha="0". Get notified of pictures location with javascript and draw them on HTMLLoader's graphics. This is complex and has problems with resizing (pictures get shifted), but was almost done...
Next idea - use <canvas> to draw images on them, sending data to javascript.
While reading canvas tutorials, stumbled upon data URI scheme, which does exactly what I needed in simplest possible way. Images are embedded in html page in base64 encoding.
I am trying to embed a flash movie (.flv) into a webpage with a transparent background.
Requirements:
- Flv runs in transparent mode - I must be able to view html contents below.
- Movie does not auto play
- Movie is contained in a div and positionend absolutely using CSS
- No video controls or overlays, you shouldn't know it's an flv
- On load Movie is hidden
- Using jQuery, I click an image link to show and play the video, clicking it again stops and hides the video - vice versa
I have tried using Longtail Video Player with swfobject.js and javascript controls but no joy. Video is not transparent and controls with a click to play still feature.
Am I overcomplicating what appears to be quite a simple task.
I happy to explore any implementation.
Adobe flash embed parameters have been set correctly and wmode = transparent.
Any help would be greatly appreciated.
Cheers
Paul
This will get you a transparent overlay in flash. Its a pretty good set of code.
http://code.google.com/p/swfobject/
SWFObject Examples
The example given above is what you need for the bare bones use of SWFObject, but what if you want to use some of the other parameters the Flash plug-in has to offer? SWFObject makes it very easy to add any extra parameter you may need. The examples below are a number of different methods you may wish to use to embed your Flash content.
A simple example adding a few extra parameters
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>
<div id="flashcontent"><!--put a place holder image in here.--></div>
http://blog.deconcept.com/swfobject/
EDIT:
THANKS TO Unreality: There has been an update in the code library you can now access it here: http://www.code.google.com/p/swfobject