easeljs

How to stop the event bubble in easljs?

拥有回忆 提交于 2021-01-28 05:13:15
问题 I have a mousedown event listener on stage and a mousedown event listener on a shape.when I click on the shape, the mousedown event listener on stage will also fire? How to solve this? var stage = new createjs.Stage("test"); stage.addEventListener('stagemousedown',mouseDown); var shape = new createjs.Shape(); shape.graphics.beginStroke("#000").setStrokeStyle(8,"round").drawRect(0, 0, 100, 100); shape.addEventListener('mousedown',smouseDown); stage.addChild(shape); 回答1: The stagemousedown

drag element on canvas

旧巷老猫 提交于 2020-12-30 03:14:23
问题 I draw an element onto a canvas as a string. I then want to be able to click the element (or tap on a mobile device) and drag it around. What I have now is: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="jquery-1.11.0.js"></script> </head> <body> <canvas id="canvas1" width="662" height="983"> <script src="jquery-1.11.0.js"></script> </canvas> <script> var chosenChord=""; //this gets

drag element on canvas

99封情书 提交于 2020-12-30 03:14:03
问题 I draw an element onto a canvas as a string. I then want to be able to click the element (or tap on a mobile device) and drag it around. What I have now is: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="jquery-1.11.0.js"></script> </head> <body> <canvas id="canvas1" width="662" height="983"> <script src="jquery-1.11.0.js"></script> </canvas> <script> var chosenChord=""; //this gets

drag element on canvas

空扰寡人 提交于 2020-12-30 03:12:03
问题 I draw an element onto a canvas as a string. I then want to be able to click the element (or tap on a mobile device) and drag it around. What I have now is: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="jquery-1.11.0.js"></script> </head> <body> <canvas id="canvas1" width="662" height="983"> <script src="jquery-1.11.0.js"></script> </canvas> <script> var chosenChord=""; //this gets

一篇文章教会你使用HTML打造一款颜色配对游戏

大兔子大兔子 提交于 2020-08-16 08:32:36
【一、项目背景】 createjs是一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。它基于容器进行展示,其中根容器是stage(舞台)对象。 今天教大家用EaselJs、TweenJs结合做一个颜色配对游戏。 【二、项目准备】 1、去下方网站: http://www.createjs.cc/ 然后下载EaselJs、TweenJs这两个模块。 2、软件:Dreamweaver 【三、项目目标】 随机产生4种颜色,让下方的色块通过鼠标移动,匹配上方的颜色框。如果上方颜色框与下方色块颜色相同。全部色块匹配完成则为成功。 【四、项目实现】 1、导入EaselJs、TweenJs模块。 <script src="js/easeljs-0.7.1.min.js"></script> <script src="js/tweenjs-0.5.1.min.js"></script> 2、body 创建画布canvas 设置画布大小,画布添加描边 ,id属性。 <canvas id="canvas" width="600" height="400" style="border: black solid 1px"></canvas> 3、创建shapes.js文件。定义一个初始化init()方法 ,创建stage对象

How to draw a custom pie chart shape using createJS or HTML canvas API?

左心房为你撑大大i 提交于 2020-08-10 19:48:30
问题 I am working on building this specific shape: This kind of looks like a pie chart having 3 leaves with each leaf having 3 set of colours. Each colour represents a specific info about data which will be showing on a popup either by clicking or hovering over it based on JSON . This pie will be placed on the map based on the coordinates(Lat, Long) assigned to it. The small red circle at the center is the place for coordinates(Lat, Long). I might use: CreateJS to generate this kinda CreateJS

How to draw a custom pie chart shape using createJS or HTML canvas API?

随声附和 提交于 2020-08-10 19:45:30
问题 I am working on building this specific shape: This kind of looks like a pie chart having 3 leaves with each leaf having 3 set of colours. Each colour represents a specific info about data which will be showing on a popup either by clicking or hovering over it based on JSON . This pie will be placed on the map based on the coordinates(Lat, Long) assigned to it. The small red circle at the center is the place for coordinates(Lat, Long). I might use: CreateJS to generate this kinda CreateJS

Javascript canvas object gets stuck after rotating with ctx.Rotate()

落爺英雄遲暮 提交于 2020-06-01 06:03:09
问题 I'm trying to make a car game that rotates the car everytime you press an arrow key. I've created the car, but everytime I try to rotate it with ctx.Rotate, the car gets stuck after moving it a specific point. It's as if the whole canvas was rotated with the car. Car won't move anymore to the right. Here is my code for rotating then drawing the car: ctx.translate((canvas.width/2) - 50, (canvas.height/2) - 50); ctx.rotate(90*Math.PI/180); ctx.translate((-canvas.height.width/2) + 50, (-canvas

EaselJS - broken panning on zoomed image

故事扮演 提交于 2020-05-15 05:58:22
问题 I'm having trouble fixing panning in this example - it works fine unless you move the zoomed image and then zoom again(offset is set to default value and the view jumps to initial position - http://jsfiddle.net/p2Qzg/). Any ideas on how to fix that? I've been trying to solve that for three days now, without any good results. var canvas= document.getElementById("myCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var stage = new createjs.Stage("myCanvas");