I'm having trouble using easelJS to render Bitmap in IE9. Every other browser renders the image fine, but IE9 canvas is blank. I even tried preload the image in a hidden div and it still doesn't work. here's my code, help please!
function init(){
var canvas = document.getElementById('myCanvas');
var stage = new createjs.Stage(canvas);
var ship= new createjs.Bitmap(ship.png);
stage.addChild(ship);
}
You need to call stage.update() after adding the child. Also, you'll need to wait until the image is fully loaded. Check out PreloadJS, by the makers of EaselJS to help you handle this.
Related
I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
As an example, I tried to set up an AR scene in three.js.
I use "aruco.js" to do that. When I load obj or any other models everything works great, However when the marker is placed in front of the camera it gets detected and the scene flickers/bumps violently. Any serious reason why this is happening?
As live demo would be hard to set up, I just uploaded a video on YouTube to illustrate my point: https://youtu.be/9jMso7vmw1M
So my exact question is: what is the best way to make AR scene stick to the marker without any flicker?
Code in jsfiddle: https://jsfiddle.net/6cw3ta57/
var markerObject3D = new THREE.Object3D()
scene.add(markerObject3D)
// set the markerObject3D as visible
markerObject3D.visible = false
//////////////////////////////////////////////////////////////////////////////////
// code in jsfiddle
//////////////////////////////////////////////////////////////////////////////////
How to debug canvas?
It's loading bunch of rotating images in canvas. I want to check what images they are. But firebug shows nothing but the canvas tag.
Is there any way to find out what these canvas pre-loaded images are so I can download them?
You can check the new Firebug feature of 3D view of the page (canvas, div, ...).
You can place debugger; in your javascript code, so the debugger will automatically stop there.
Images drawn to canvas elements are loaded by javascript e.g.
var img = new Image();
image.onload = function(){ draw on canvas };
img.src = "image url";
You could try searching the JS source for .jpg or .png references, etc.
I have this problem only with Firefox 24.0 :
I render my scene with an object and its texture plus 2 point lights and most of the time after the first rendering, the canvas becomes white.
The thing is that I display several canvases (12) and they become all white at the same time.
I don't have this problem with Chrome 30.0.1599.69 m nor IE 10
I've found a workaround thanks to a colleague.
Actually with Firefox, during a repaint or a reflow, the canvas can turn white because of the way firefox handles the video card.
So, instead of appending the Three's dom element directly into the DOM, I've created a new canvas which is put into the dom and then I draw the Three's dom element onto it.
var onscreenCanvas = document.createElement('canvas');
var ctx = onscreenCanvas.getContext('2d');
ctx.drawImage(threeJsDomElement, 0, 0);
It's a bit slower than the general method but it works well.
I have used this code (kind of tutorial) at http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5 ... In this code, I used the "Image Scale / Resize" code and I found something that I cannot explain. I mean, instead of using :
final Image img = new Image("/img/test.jpg");
I have used the client bundle and so the following code:
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1());
And I do not have any error, but the image did not appears. Finally I found the solution with :
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1().getSafeUri());
Do you know the reason why ".getSafeUri()" solves the problem ?
See ImageResource in ClientBundle as real <img> element
An Image created with an ImageResource will unconditionally use a clipped image, where the image is set as a CSS background image (and the <img>'s src is a 1×1px transparent GIF). Because the image actually is a blank GIF, painting it to the canvas does nothing noticeable; canvas does not take CSS styles into account.
Using getSafeUri() you'll have the data: URL of the image, which will be used as the src of the <img>. No blank.gif here, so the image is correctly painted on the canvas.
Note however that getSafeUri() won't work in IE6 and IE7 by default. If you need to support them, you'll have to annotate your ImageResources with either #ImageOptions(preventInlining = true) or #ImageOptions(repeatStyle = RepeatStyle.Both). Alternately, you could use DataResources instead of ImageResources.