easeljs

I switched over to EaselJS after having muleheadedly implemented all mouse and vector related information in the HTML canvas element. I have gotten used to EaselJS and it is really neat. I especially like the containers and how simple they make drawing embedded shapes. However, I can't figure out how you, for example, implement a color change of a shape on a mouse over. Anything as simple as a rectangle changing color from red to green. Am I supposed to remove the shape from its container and create a new shape with the new color? To complicate matters, if one shape partially occludes another,

I'm making a rotating rectangle with EaselJS but it doesn't work like I thought. As I think, if I want to make a square (40x40) which rotates around its center at position x=100, y=100, I will need to set it's registration point to regX=20, regY=20. //Create a stage by getting a reference to the canvas stage = new createjs.Stage("demoCanvas"); //Create a Shape DisplayObject. circle = new createjs.Shape(); circle.graphics.beginFill("red").drawRect(100, 100, 40, 40); circle.regX = circle.regY = 20; //Add Shape instance to stage display list. stage.addChild(circle); createjs.Ticker.setFPS(60);

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 3 = bad fps zoom 5 = good fps What would be the reason for this frame rate problem? Note i have i

Pretty simple concept but it doesn't seem to be working. Here is my code: stage.clear(); stage.update(); Simple stuff -- nothing happens. The docs aren't helping. This ended up working for me: stage.removeAllChildren(); stage.update(); if you have just one child of shape on that stage and dont want use removeallchildren, you can do this: myshape.graphics.clear(); stage.update(); if more than one, then loop its children. 来源： https://stackoverflow.com/questions/13056076/easel-js-stage-clear-not-working

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 have an example of this, or know what to do? I could provide code examples of what I did, but it's

写在前面 首先，还是谢谢大家的支持，谢谢！记得在之前的文章中我说过自己算是一个半文艺程序员，也一直想着写一写技术性和其他偏文学性的文章。虽然自己的底子没有多么优秀，但总是觉得这个过程中可以督促自己去思考，督促自己去学习和交流。毕竟每天忙忙碌碌之余，还是要活出自己不一样的生活。 其次，我开通了个人的 GitHub主页 ，里面有自己的技术文章，还会有个人的随想、思考和日志。以后所有的文章都会第一时间更新到这里，然后同步到其他平台。有喜欢的朋友可以没事去逛逛，再次感谢大家的支持！ 什么是CreateJS 官网介绍 （ 中文 ）：CreateJS 是一组模块化代码库和工具套件，可以独立工作也可以组合工作，用于通过HTML5技术来在网页上开发丰富的交互式内容。 四个核心库 CreateJS主要包含如下四个类库： EaselJS – 简化处理HTML5画布（核心） TweenJS – 用来帮助设计H5动画，调整HTML5属性 SoundJS – 用来简化处理HTML5 audio 音频 PreloadJS – 帮助管理和协调加载中的一些资源 今天，主要来了解一下 EaselJS 库 EaselJS EaselJS 简介 EaselJS 是一个JavaScript库,用来简单快捷的操作 HTML5 Canvas 标签。在创建H5游戏，生成艺术作品、处理其他高级图形化等工作中有着很友好的体验。

I want to be able to click on a container/shape and as I move the mouse a line that can be connected to another container/shape (with an arrow at one end) is drawn. Ideally I want this line to snap to the destination element. I'm new to EaselJS and I've got no clue on how to go about this. This is the closes I've come across of here, and I can't make sense out of it: Drawing a Line in a html5 canvas using EaselJS Here is a quick demo I put together The key steps are: Listen for mousedown on the initial item Create a shape to draw the connection when the mouse is pressed Listen for mousemove

I have simple animation created using create js and ffmpegserver.js. ffmpegserver.js. This is a simple node server and library that sends canvas frames to the server and uses FFmpeg to compress the video. It can be used standalone or with CCapture.js. Here is repo: video rendering demo . on folder public, I have demos eg test3.html and test3.js Test3.html <!DOCTYPE html> <html> <head> <title>TweenJS: Simple Tween Demo</title> <style> canvas { border: 1px solid #08bf31; justify-content: center; display: flex; align-items: center; margin: 0px auto; margin-bottom: 40px; } a { width: 150px; height