首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在createJS/easelJS中旋转一个对象围绕另一个对象

在createJS/easelJS中,要实现一个对象围绕另一个对象旋转,可以通过以下步骤实现:

  1. 创建两个对象:被旋转的对象和旋转中心对象。
  2. 设置旋转中心对象的位置,确保它在被旋转对象的中心位置。
  3. 使用createJS/easelJS的Ticker类来监听每一帧的渲染事件。
  4. 在每一帧的渲染事件中,计算被旋转对象相对于旋转中心对象的位置。
  5. 使用createJS/easelJS的Rotation类来设置被旋转对象的旋转角度。
  6. 更新舞台以显示旋转效果。

下面是一个示例代码:

代码语言:javascript
复制
// 创建舞台
var stage = new createjs.Stage("canvas");

// 创建被旋转的对象
var object = new createjs.Shape();
object.graphics.beginFill("#FF0000").drawRect(0, 0, 100, 100);
object.regX = 50; // 设置注册点为对象中心
object.regY = 50;
object.x = 200; // 设置初始位置
object.y = 200;
stage.addChild(object);

// 创建旋转中心对象
var center = new createjs.Shape();
center.graphics.beginFill("#00FF00").drawRect(0, 0, 10, 10);
center.x = 300; // 设置旋转中心位置
center.y = 300;
stage.addChild(center);

// 监听每一帧的渲染事件
createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event) {
  // 计算被旋转对象相对于旋转中心对象的位置
  var dx = object.x - center.x;
  var dy = object.y - center.y;

  // 计算旋转角度
  var angle = Math.atan2(dy, dx) * 180 / Math.PI;

  // 设置被旋转对象的旋转角度
  object.rotation = angle;

  // 更新舞台
  stage.update();
}

这个示例中,我们创建了一个红色的矩形对象作为被旋转对象,一个绿色的小方块作为旋转中心对象。通过计算被旋转对象相对于旋转中心对象的位置,然后使用Rotation类设置被旋转对象的旋转角度,实现了围绕旋转中心对象的旋转效果。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求弹性调整计算资源,支持多种操作系统和应用场景。产品介绍链接
  • 腾讯云对象存储(COS):提供高可靠、低成本的云端存储服务,适用于图片、音视频、文档等各种类型的数据存储和分发。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一篇文章教会你利用createjs实现界面效果

【一、项目背景】 createjs一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。...它基于容器进行展示,其中根容器是stage(舞台)对象。 今天教大家用EaselJs、TweenJs结合做一个游戏说明界面。...创建一个div,用h3表示标题,P标签加载内容用a标签做按钮,如图: ? 【六、项目实现】 1、导入EaselJs、TweenJs模块。...var d=new createjs.DOMElement("instrutions"); d.alpha=0; d.x=50; 4)get()表示你要改变的对象...【七、总结】 1、本文主要介绍了createjsEaselJs、TweenJs的用法,以及对stage是如何创建的,stage上 页面的动画效果。页面上如何去呈现stage。以及页面是如何的跳转。

1.1K10
  • createjs入门

    createjs一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件。...createjs由几个库组成: l easeljs,这个是核心,包括了显示列表、事件机制; l preloadjs,用于预加载图片等; l tweenjs,用于控制元件的缓动; l soundjs,用于播放声音...easeljs 81k,preloadjs 31k,soundjs 34k,tweenjs 18k,对于手机小动画或小游戏,其实只需要加载easeljs即可,因为核心库已经涵盖了简单图片的预加载功能。...使用滤镜的方式跟Flash一致,需要新建Filter实例,添加到目标元件的FilterListCreatejs框架在下一帧就会把该元件加上滤镜效果。...下边以一个例子概要学习一下Createjs的使用: var stage; function init

    1K40

    VUE+WebPack游戏设计:'乘法防线'游戏设计

    本次游戏设计,我们需要使用html5专有的canvas,也就是画布对象。同时为了便于canvas上绘制图案,我们引入一个第三方库叫做CreateJS,它能帮我们管理canvas上绘制的各种图形。...先创建一个WebPack项目,同时把含有CreateJS的第三方库文件easeljs-0.7.1.min.js拷贝到项目的static文件目录下,该第三方文件和所有项目代码,请到网易云课堂下载。...,mounted 函数会被调用,函数里,我们先获取画布canvas的对象,并通过window对象获取前面从第三方库拿到的createjs对象,接着我们通过new从createjs对象里构建了一个Stage...对CreateJS的详细文档可以从以下链接获取 代码的Text对象CreateJS一个子类,它的作用是页面上渲染字符串,就如例子中一样。...,它先从createjs创建一个Container对象,container跟前面讲过的Stage类似,是可以用来包含显示元素的容器对象,同时定义了盒子的绘制样式style, style.strokeWidth

    81220

    easeljs】显示对象基础 DisplayObject 类

    DisplayObject is the base class for all display classes in the EaselJS library....缓存好的这个显示对象,可以自由地移动、旋转、渐消(faded)。然而,如果它的内容发生变化,你必须手动调用updateCache() 或者重新使用 cache()。...例如如果你定义了一个形状,而且形状里0,0位置画一个半径25的圆形: var shape = new createjs.Shape(); shape.graphics.beginFill("#ff0000...例如使用myShape.cache(0,0,100,100,2)缓存一个矢量形状,然后得出的缓存canvas会是200x200 px。这个可以让你更保真地放大和旋转缓存元素。默认是1。...(这一点是官方翻译过来的,应该是指注意3提到的问题吧) 注意2:通常,最终的缓存canvas的面积是widthscale乘以heightscale,然而一些滤镜(例如 BlurFilter)会给原对象添加宽度

    73230

    JavaScript,如何创建一个数组或对象

    JavaScript,可以使用以下方式创建数组和对象: 一:创建数组(Array): 1:使用数组字面量(Array Literal)语法,使用方括号 [] 包裹元素,并用逗号分隔: let array1...Array(1, 2, 3); // 包含三个数字的数组 let array6 = new Array('apple', 'banana', 'orange'); // 包含三个字符串的数组 二:创建对象...(Object): 1:使用对象字面量(Object Literal)语法,使用花括号 {} 包裹键值对,并用冒号 : 分隔键和值,用逗号分隔多个键值对: let obj1 = {}; // 空对象 let...age: 25 }; // 包含三个属性的对象 2:使用 Object 构造函数创建对象,通过传递键值对作为参数: let obj4 = new Object(); // 空对象 let obj5...lastName: 'Doe', age: 25 }); // 包含三个属性的对象 这些方式都可以创建数组和对象,并根据需要添加、修改或删除元素或属性。

    31630

    easeljs】显示位图 Bitmap 类

    一个Bitmap对象绘制一个显示列表的图像、canvas,或者视频。...可以使用一个存在的html元素或者一个字符串来实例化一个Bitmap对象 例 var bitmap = new createjs.Bitmap("imagePath.jpg"); 注意: 传入一个字符串路径或者一个未加载的...img标签时,添加到stage后,它显示之前,可能需要一直尝试重新绘制stage 如果直接是一个SVG 资源,Bitmaps将不会访问alpha值,除非是0或者1。...你可以把图像传给EaselJS图像上设置crossOrigin标识绕过它,例如:img.crossOrigin="Anonymous"; 构造函数 Constructor Bitmap ( imageOrUri...可以是一个image、canvas或者视频对象,或者是一个url字符串。如果是一个URI,会创建一个新的image对象和将被指定到此实例的 image 属性。

    96740

    小游戏开发概述 - 笔记

    游戏引擎有一些通用能力:预加载、展示与图层组合系统、动画系统、音效和声音系统 # Web 游戏引擎 # Cocos 优势: 平台支持能力好 完善的游戏功能支持生态较好 缺点: 3D 能力仍在建设...缺点: 界面能力不友好 生态很差 # Egret(白鹭) 优势: 工具链比较完善 第三方库支持好 企业定制能力强 缺点: 更新迭代遭瓶颈 生态较差 # CreateJS...库 & Phaser 游戏引擎 CreateJS:它是多个库的集合,EASELJS (控制素材展示与组合)、TWEENJS (控制素材缓动动画)、SOUNDJS (控制声音)、PRELOADJS (控制加载...Phaser 游戏引擎:除了 CreateJS 为基础的展示、声音、动画、加载系统,还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。...Sprite(精灵) Sprite(精灵): Pixi 或者更多游戏引擎的 Sprite 是一个用于承载图像的对象,你能够控制它的大小、位置等属性来产生交互、动画 显示一个精灵: 让精灵动起来:

    94320

    高频八股:new 一个对象的历程

    STOP,废话结束 今天介绍两个 JVM 的高频基础题: 对象的创建过程(new 一个对象的历程) 对象堆上分配的两种方式 对象的创建过程分五步走,如下图: 我感觉 JVM 如果不看 GC... Hotspot 虚拟机对象在内存的布局可以分为 3 块区域:对象头、实例数据和对齐填充。...根据堆的内存是否规整,有两种划分方式,或者说对象堆上的分配有两种方式: 1)假设 Java 堆内存是绝对规整的,所有被使用过的内存都被放在一边,空闲的内存被放在另一边,中间放着一个指针作为分界点的指示器...对象创建在虚拟机是非常频繁的行为,以上面介绍的指针碰撞法为例,即使只修改一个指针所指向的位置,并发情况下也并不是线程安全的,可能出现某个线程正在给对象 A 分配内存,指针还没来得及修改,另一个线程创建了对象...---- 最后放上这道题的背诵版: 面试官:讲一下对象的创建过程 小牛肉:new 一个对象的过程主要分为五个步骤: 1)类加载检查:具体来说,当 Java 虚拟机遇到一条字节码 new 指令时

    57810

    VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

    要实现爆破效果,我们需要使用另一个第三方库tweenjs-0.5.1.min.js,先在index.html添加对该库的引入: window.createjs = createjs...,我们会循环查看所有盒子的坐标,如果盒子坐标没有超过红线,那么我们让盒子继续下降,如果超过了,则调用removeNumberBox()来实现盒子的清除,removeNumberBox,我们把超过红线的盒子在数组中找到...,拿到要爆破的盒子对象后,代码调用showCircle(x,y),其中x,y是盒子当前坐标,它会在合作表明显示出一个绿色的圆圈图案,然后把盒子从页面上删除掉,为了显示爆破效果,绿色圆圈图案出现在画面上后.../static/images/replay_active.png); } 然后我们script标签也添加控制代码,使得游戏结束后页面上出现一个’replay’按钮,玩家点击按钮后

    97930

    请你尽量全面的说一个对象 JVM 内存的结构?

    首先,Java 对象堆内存内存结构包括: 类型指针: 一个指向类信息的指针,描述了对象的类型。...标记字(Mark Word): 一组标记,描述了对象的状态,包括对象散列码(如果有)、对象的形状(是否是数组)、锁状态、数组长度(如果标记显示这个对象是数组,描述了数组的长度) 对齐性填充: 所有对象都是...8字节对齐的 -> 也就是说,所有对象的起始位置都是满足A(A%8==0),所以对于有的对象需要这个对齐性填充来满足这个规则。...域变量区域: 这个对象的域变量所占用的内存。Java域变量存在两类:原始类型(primitive type)和普通对象指针(ordinary object pointer)。...然后, Java 对象的类型信息存储于 Java 元空间之中,默认情况下(压缩类指针开启的情况下),对象头的压缩类指针指向 MetaSpace 的类空间,类空间中存储各种指针型数据,例如实现方法多态以及

    32330

    VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发

    这个游戏具备一个特点就是2.5D,它是一种经济系统构建型游戏,开始时玩家得到的是一个空白的城市地图,玩家以市长的身份选择城市构建各种设施,通过不同设施的组合何以产生金币,基本情况如下: ?...先像以前项目一样启动一个新的VUE工程,然后index.html里面把createjs和tween这两个库引入项目,代码如下: window.createjs =...,它返回的是一个容器对象,cityLayer返回的是城市图层,这里我们先简单返回一个容器对象,以后再进行详细的代码添加。...,然后把他们添加到一个图层容器,最后我们初始化函数,把UI图层对象添加到舞台容器: init () { ....

    81240

    H5动画开发快车道 - AnimateCC与createjs开发实践

    Createjs CreateJSCreateJS库,可以说是一款为HTML5游戏开发的引擎。目前被Adobe整合到Animate CC,作为导出canvas动画的基础javascript库。...然后可以发现在导出来的html文件里混合了js代码,我们可以新建一个main.js文件把html文件的js代码放进去,专门用来控制动画的播放以及一些交互逻辑的编写,整理代码如下(详细的说明有写注释)...但是有时候有些额外的对象或者方法是需要放在view1里面的,那怎么办呢? 我们新建一个View1的类把animate cc里的view1给复合进去。...() 这里可以是额外处理的对象    }    var p = createjs.extend(View1,createjs.Container);    cls.View1 = createjs.promote...然后js上新建一个model来专门处理接收事件,记得要是EventDispatcher类: model = new createjs.EventDispatcher(); 然后代码监听就可以了:

    3.5K41

    VUE+WebPack:开发一款太空版植物大战僵尸的前端页游

    一个是movieclip-0.7.1.min.js,另一个是assets.js,后者是一个资源类库,我们游戏所有的图片资源都压缩在这个类库里,后面我们会详细解读它的作用。...函数里,我们先获取createjs对象,图片的显示和特性都需要该类库提供支持。...制作出来的,这些图片资源全部打包在一个名为assets.fla文件,这个文件必须使用flash相关软件才可以查看,为了能够js代码中使用fla文件的资源,通过flash软件就可以把.fla文件转为...assetsLib就是由assets.js导出来的一个对象,通过调用该对象的接口,我们可以把flash创建的图片资源加载到页面上。...,我们通过getElementById获得html控件的对象,以便我们后面改变他们该显示的信息。

    1.2K20

    使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

    /static/easeljs-0.7.1.min.js"> <script type="text/javascript" src="....moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } 我们<em>在</em>主入口组件<em>中</em>引入了<em>一个</em>...,<em>另一个</em>用来显示游戏画面,一旦所有设计调试通过后,我们就可以把调试画布组件给去除,留下第二个画布组件。...接着我们<em>在</em>组件初始化代码<em>中</em>,将物理引擎中用到的组件都获取到,代码如下: export default { data () { return {...页面启动后,<em>在</em>画布里会出现两个正方形,其中<em>一个</em>正方形会像现实世界一样做自由落体运动,它下落有<em>一个</em>加速度,<em>在</em>物理引擎的驱使下,正方形的下落与现实世界<em>中</em>物体的下落是一样的。

    1.5K50

    Java一个对象是如何被创建的?又是如何被销毁的?

    Java一个对象的创建涉及以下步骤:内存分配:当使用关键字new调用一个类的构造方法时,Java虚拟机会在堆中分配一块新的内存空间来存储该对象。...对象的生命周期一般包括以下几个阶段:创建阶段:Java,通过使用关键字new来创建一个对象。在这个阶段,对象会被分配在堆上,并初始化为默认值。...终结阶段:Java,提供了一个finalize()方法,这个方法在对象即将被垃圾回收时被调用。开发者可以重写这个方法,定义对象在被销毁之前需要执行的清理操作。...然而,某些情况下,可能需要手动进行一些销毁操作,如关闭文件或网络连接等。这种情况下,可以在对象的生命周期方法执行这些操作。生命周期方法是指在对象不再被使用时被回调的方法。...总结:对象Java通过垃圾回收机制进行销毁,对象的生命周期包括创建、使用、不可达、终结和垃圾回收的阶段。可以通过重写finalize()方法来定义对象销毁之前需要执行的清理操作。

    43951

    HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

    unity、cocos2d、starling中使用spine已经很成熟了,而HTML5这一块可能刚刚起步,暂时spine对这一块也没有做得非常完善。 整理了一下,找了一些比较好的方法,分享一下。...createjs 这是HTML5动画引擎比较好用,也比较小的一个,如果项目纯碎为了播放骨骼动画,而不是一个游戏,强烈推荐用这个。缺点是对webgl支持不好,官方也没什么动作去做好webgl的支持。...DEMO:http://kenkozheng.github.io/spine/easeljs.html 源代码:https://github.com/kenkozheng/HTML5_research/...这不是一个出名流行的动画库或者游戏引擎。。。暂时没有人认识这货。...相对市面支持webgl的动画库,min2d暂时应该是非常非常小的,是不是最小不清楚。

    5.6K51
    领券