html5 – 523326 http://www.523326.com 写想写的东西 Wed, 28 Nov 2018 05:33:14 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.9.8 Canvas + Egret 制作绘图画板 http://www.523326.com/?p=294 http://www.523326.com/?p=294#comments Sun, 17 Jan 2016 08:58:13 +0000 http://www.523326.com/?p=294 继续阅读 Canvas + Egret 制作绘图画板]]> 虽说Egret实现了大部分As3的API以及其中的功能,之前还是觉得蛮神奇的。后来打算做一个绘图的画板,当做练手。因为以前刚开始学AS3的时候 也做过。于是开搞,发现其他功能都能实现,唯独一个,就是橡皮擦。考虑的方式是 将笔触设置为透明即可,但Egret提供的API却不支持。

于是网上寻找H5橡皮擦,发现有大神实现过。于是才知道,其实Canvas 是有操作像素,以及清除笔触之类的功能的。但Egret却没提供,估计是因为Egret本身就是一个Canvas 而官方是不建议 直接操作这个Canvas的。那么最后想到的方案是 通过Egret来实现其他操作,显示。而绘图这一层用单独的一个Canvas来做。最后还是实现了

drawpaneldrawpanel1

具体功能有下面:

可设置笔触 大小 以及颜色
可执行橡皮擦功能 橡皮擦目前为固定的正方形 且大小固定
可执行分享到QQ空间
可下载当前绘制内容
可以导入外部图片作为背景图使用
导入的图片 可以任意拖动 也可以锁定拖动 执行笔触涂写 同时也可隐藏导入的背景图

点我查看效果

说说其中用到的东西以及遇到的问题

1、判断当前平台是桌面浏览器 还是 移动端

this.mIsMobile = “ontouchstart” in window ? true : false;

这个在绘图的时候用到过,因为坐标有些变化

2、获取Egret的Canvas

首先获取了所有的Canvas    var eCanvas = document.getElementsByTagName(“canvas”)[0];

然后是 创建绘图层Canvas  var drawCanvas=document.createElement(“canvas”);

接着是将绘图Canvas叠加到 egret Canvas的上面  eCanvas.parentElement.appendChild(drawCanvas);

3、处理叠加

由于两个Canvas 是在同一个Div里面的所以默认情况下 他们是不会叠加的,然后设置了zIndex 以及后面添加的Canvas的 style.left属性

最终通过 window.onresize事件调整了适配 让drawCanvas和 eCanvas  刚好能够叠加在一起

4、this的理解。

ts 里面或者说是js里面的this和 咱们的AS3里面的 是有区别的,as3里面的this指代的就是当前类的实例。不会”乱指”。

但是ts里面的this会发生改变“乱指”。具体的就是在调用回调函数的时候。

egret中调用全局函数 变量的时候 是必须要加上this关键字的,这个可以理解,此时的this就是指当前类的实例。

但是之前发现使用事件的时候也会传入this 一直没弄明白为什么。直到自己在写回调函数的时候,就明白了。

函数可以当做参数传入,同理调用的时候按照以前as3的思维 可以直接 callFunc&&callFunc() 这样调用。同样在egret中采用这种方式,发现出了问题。如A类 有个全局方法是 a() 这个作为参数传给了 B类 B类采用callFunc&&callFunc()的方式调用。

然而在a()里面调用A类的全局变量或函数 如 this.aa;那么就会报错,这是因为这个this此时并不是 A的实例。如果我们把a()弄成局部函数就可以了。

那么问题来了,如果需要传入全局函数怎么办,类似于egret事件监听那样。方法是在B类调用的时候 使用Function 的apply方法进行函数回调即可 同时将 A类的this作为参数传给B类 如 callFunc&&callFunc.apply(aThis);

5、关于分享

做AIR移动开发的时候 做分享功能是接入的是三方分享SDK 。同样,做网站的时候,包括此站用的是百度的分享代码。同样的网页分享如果使用百度的分享代码,那么达不到我的要求,比如我想要点击一个按钮直接跳转分享,而百度分享代码是直接插入到标签里面的,当然也可以通过代码来控制。

寻思着是否有简单的方法

最后发下一个很好的api接口  jiathis 感觉很爽,直接是传入一个使用了get的地址即可

6、关于代码

不得不说 ts真的很不错,如果有想实现的效果 而不知道怎么实现,直接百度js相关的即可,然后直接可以在egret wing中编写js代码 最后也同样顺利执行

7、上传

上传图片,使用了egret社区里面的郭大侠的h5loader

 

 

 

 

 

 

 

 

 

 

 

]]>
http://www.523326.com/?feed=rss2&p=294 4
TypeScript学习笔记记录 http://www.523326.com/?p=292 http://www.523326.com/?p=292#respond Sun, 17 Jan 2016 08:15:12 +0000 http://www.523326.com/?p=292 继续阅读 TypeScript学习笔记记录]]> 距离上一次写的关于H5的已经一月有余了,上次说道去了解Egret,发觉如果单单是去看官网的API 还是有些不够的。同时也要对TypeScript进行一些了解才行。以下是一些基础的学习记录。多数其实也是和AS3进行一种对比。

 

1、TypeScript后缀为ts,编译之后会生成js,而我们要在html调用ts文件的话,如ts 那么我们在引用的时候要写helloworld.js;

<script type=“text/javascript” src=“helloworld.js”></script>

以上写法是必须的 不能像下面这样

<script type=“text/javascript” src=“helloworld.js”/>

2、TS的基本数据类型 有 number、any、Array、boolean

3、数组的定义 var arr:number[]=[];var arr:Array<number>=[];

Ps:这个就有点类似于AS3中的Verctor,如果要用类似AS3中的Array的话可以是 var arr:any[]=[];即允许任何类型

4、ts可以调用外部的js库,如果要调用 那么必须包含一个声明文件.d.ts 并且需要进行引用 ts中引用外部文件库的方法是。

///<reference path=”jquery.d.ts”/>
///<reference path=”ClassTest.ts”/>

这个引用直接在ts文件里面的最前面写即可  千万不要把///当做注释了 一定要写上

5、TS中也有for in 这种关键字 但是key只能是number型

如var obj:Object={}; for( var key in obj){}这样即可,不能用key:string;

6、TS中定义类。这里所谓的类即模块 语法如下

module CT{
export class MM{
constructor(){}
getMsg(){
}
}
}

其中 CT是所谓的模块 个人感觉类似于包的概念 MM是这个类的名字 和文件名无关这点和AS3有区别。如果我们实例化MM这个类 那么应该是

///<reference path=”f/MM.ts”/>注:此处假设MM这个类位于f文件夹中

var mm:CT.MM = new CT.MM()

然后其他的调用方式和AS3类似 如 mm.getMsg();TS分有public 和private 默认情况下 是public 对于全局函数 不要写function .局部函数需要写

这就不难理解为啥egret 的很多API需要加上 egret.前缀了 这个就是模块化

如果我们在一个ts文件中调用这个ts文件里面定义的类 则不需要上面的写法

直接可以是 class MM{};  这个和as3中的包内定义类一个意思 不需要写包名;

也可以直接在ts文件中不进行模块化的书写类

class MTTT{
constructor(){
}
public nn():string{
return “mttt”;
}
}

如上,去掉了 module 和 export关键字 同样可以  但有一点无论怎么样的写法 在调用类的时候 必须进行引用 即便是处于同一目录下  而且在html <script标签中一定要加上 ts的文件名.js 即这个文件的路径 才能顺利执行 不过egretwing里面 我们不用弄标签 这个还是挺好

7、在类中调用全局函数 全局变量时 加上 this;

8、Ts的接口用法 和其他面相对象语言类似 TS也只能单继承 多实现接口

9、Ts中函数定义

局部函数直接写方法名即可 需要区分的是 private 和 public

或者可以赋给变量值 var func=function f(){}

如果要给予变量一个类型 可以是 var func:(a:number)=>number=f(a:number):number{return 1;};

var func:()=>void=f(){};

定义函数的可选参数关键字 ?   参数默认值 类似于as3  定义其余参数同样和as3一样使用… 不过有区别的是 ts中可以指定其余参数组的数据类型 也可以不指定

如 function restFunc(…infos:number[]){}

或者 function restFunc(…infos){}//同AS3;

同样ts的函数中 存在 arguments这个参数数组 同as3

 

]]>
http://www.523326.com/?feed=rss2&p=292 0
带着As3拥抱Html5 http://www.523326.com/?p=277 http://www.523326.com/?p=277#comments Mon, 07 Dec 2015 15:10:03 +0000 http://www.523326.com/?p=277 继续阅读 带着As3拥抱Html5]]> 上周五开始花了一点时间去细细的了解了下关于H5的一些东西,其实也主要是看了下egret和layabox这两个适合于As3程序的国内H5游戏引擎。最终还是选择接触下Egret。

虽然说目前而言关于H5的负面消息,也是有很多。什么蓝港,滴滴裁撤H5游戏部门等等。但是就H5的先天优势,早晚势不可挡。

由于工作中没用到H5,只有有空的时候,看看。好吧,说说这两天关于Egret的相关东西

Egret可以说是还原了很大一部分AS3所具备的API,包括用法什么的都是有很大的相似之处。

比如显示列表、事件机制、还有容器等等

所以说对于ASer而言很容易上手。Egret采用TypeScript来进行代码的编写,TypeScript是啥 具体的度娘之。

然后在编写过程中也只是在一些语法上能用到TS相关的,其他的地方不是很多。可能是没接触到深层次的缘故。

下面记录下接触以来决得应该注意的地方,(主要还是和as3有所区别):

1、在定义Egret的一些核心类以及多数的类的时候需要加上egret.  如 var _sp:egret.Sprite = new egret.Sprite();

一开始以为是Egret特有的 后来用p2物理引擎,发现也会用。好吧,没写过网页前端的表示很小白。

2、对任何的全局变量和全局函数的调用都需要使用this  比如 private AA;那么调用的时候必须是 this.AA;

3、监听事件的时候,需要加上this或其他( 目前还只是遇到了this)如 this.stage.addEventListener( Event.ENTER_FRAME,this.onLoopHandler,this);

4、定义全局函数、全局变量 不需要加function 、var 语法问题

5、 RES.loadConfig(“resource/default.res.json”,”resource/”);进行资源加载的时候 后面的resource是不能把那个斜杠去掉的。。。以及签名的resource/也不能去掉。本以为这个方法可以只通过检测文件夹名字即可,哪知 缺一不可。

其他的 后期慢慢的去发现。。

总体感受是Egret还是挺好用的。整个游戏流程还比较完善,包括其他文理打包工具,龙骨,组件什么的。不过wing有时候也会抽风。

 

 

]]>
http://www.523326.com/?feed=rss2&p=277 3