easeljs | 易学教程

EaselJS - Best way to detect collision

阅读更多关于 EaselJS - Best way to detect collision

问题 I'm trying to find a good way for collision detection for my easelJS small app. I've just created 2 rectangle using createjs.Shape But after creating a rectangle shape, the API doesn't let me know the width and height of the rectangle (I don't know why). EaselJS Shape has a method called "hitTest" but it can only be used when you want to test collision of the shape and a point . //Here's the code http://jsfiddle.net/ZbZjL/16/. //Create a stage by getting a reference to the canvas stage = new

Getting IE8 compatibility with EaselJS and ExplorerCanvas

阅读更多关于 Getting IE8 compatibility with EaselJS and ExplorerCanvas

问题 I am using EaselJS and want to allow for backwards compatibility with ExplorerCanvas. This should be possible using the following code (see here): createjs.createCanvas = function () { ... return canvas implementation here ... } However, If I put an alert in this function and run the code, the function is never run. How do I go about getting this to work? Edit: Here is a simplified example of the code I am using: <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <script src='

How to overlay non-transparent part of Bitmap with a color in Easeljs/Createjs?

阅读更多关于 How to overlay non-transparent part of Bitmap with a color in Easeljs/Createjs?

问题 I have an PNG image that has some transparent portion. Now I want to apply a color overlay to the non-transparent part of the image while keeping the transparent portion intact. If I use the ColorFilter it fills the whole bitmap. I've also tried the AlphaMaskFilter (using the same PNG as source) but it doesn't work either. The whole bitmap is always filled with color. Any other suggestions on how to do it? 回答1: You would have to write a filter that either: works like AlphaMaskFilter, only

Resizing images using createjs / easeljs

阅读更多关于 Resizing images using createjs / easeljs

问题 I'd like to dynamically downsize some images on my canvas using createjs, and then store the smaller images to be displayed when zooming out of the canvas for performance reasons. Right now, I'm using the following code: var bitmap = createjs.Bitmap('somefile.png'); // wait for bitmap to load (using preload.js etc.) var oc = document.createElement('canvas'); var octx = oc.getContext('2d'); oc.width = bitmap.image.width*0.5; oc.height = bitmap.image.height*0.5; octx.drawImage(bitmap.image, 0,

Erasing parts of a bitmap in EaselJS using destination-out compositing

阅读更多关于 Erasing parts of a bitmap in EaselJS using destination-out compositing

问题 I'm having a bit of difficulty getting some functionality to work. I'm trying to create an eraser and erase parts of an image using easelJS. I've seen other people do this, but only erasing other graphics - and when I try to erase an image, I can't get anything to work. If I wanted to erase a bitmap instead of other graphics, is that possible? I also tried to use the AlphaMaskFilter, but it's giving me the exact opposite of what I'm looking for (it's masking everything, and only revealing

CreateJs Canvas's shape losses its co-ordinates on Windows Phone

阅读更多关于 CreateJs Canvas's shape losses its co-ordinates on Windows Phone

问题 am making a Createjs and html5 project in which I am drawing a shape(Red circle), when I click over the circle it gives alert. It works fine on all desktops and android phones. Except when I open this in a windows phone it works fine on the normal screen but when I zoom the screen it loses it working, an alert is shown when I click anywhere on the screen(maybe where the co-ordinates of the shape resides) but not when I click over the shape(Circle),, Your help is appreciated my demo.html <

Easiest way to load a video in CreateJS?

阅读更多关于 Easiest way to load a video in CreateJS?

问题 I'm looking to load a video via CreateJS (Flash CC), either mp4 or ogg format. What is the easiest way to do this? There is almost no documentation out there. I know videos can be uploaded as a bitmap, eg: var bitmap = new createjs.Bitmap("moviePath.mp4"); When I load a video in this way, I can hear the audio playing, but can't actually see the video on the canvas. I suspect this is because the canvas isn't drawing each individual frame, despite putting ticker functions and stage.update() Any

CreateJS / EaselJS Strange Performance with certain size shapes

阅读更多关于 CreateJS / EaselJS Strange Performance with certain size shapes

问题 I am currently developing a game, it uses a large tiled map, that can be dragged around, and moves quickly with your character. I have created a simple version of the problem JSFiddle Example Each tile is a Shape and is cached . All shapes go inside a container , the container is moved based on camera position. I am noticing weird drops in fps at certain zoom levels. The zoom simply adjusts the size of the shapes. If you adjust the zoom you will see what i mean. Chrome zoom 1 = good fps zoom

EaselJS Alpha Mask Filter

阅读更多关于 EaselJS Alpha Mask Filter

问题 I'm fairly new to Canvas. I've been trying to get the images reversed in this EaselJS Alpha Mask example so that the initial image is clear, and what you paint is blurry; basically, the reverse of the demo. I've been playing around with it for hours, applying filters to the bitmap var and removing them from the blur var. Everything I do just doesn't work. Seems like it would be an easy fix of just switching things around but that doesn't seem to be the case. Not for me anyway. Does anybody

EaselJS perspective image transformation

阅读更多关于 EaselJS perspective image transformation

Is it possible to make perspective image transformation in html5 canvas? I am using EaselJS right now and can't find a solution for my need. I don't tried the easel.js yet, but every image transformation is done with matrix operations: translate, rotate, skew etc. Looking on the easel.js source code there is a Matrix2D class, and the documentation to it: http://www.createjs.com/Docs/EaselJS/Matrix2D.html . For a perspective transformation you need to use rotation , scaling and skewing . You need to only play with values and test which is best suited for your needs. To achieve perspective