用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

canvas本身就是一个Graphics,可以直接进行绘图
在actionscript里面,每个Sprite都有一个Graphics,Shape我先不考虑了,它更容易实现些,
在Html5中,绘图都是绘在同一个canvas上面的,所以我们现在需要考虑两个问题,
1,如何把每个Sprite里的Graphics在不同的时刻,画在同一个地方
2,因为我们现在在不停的刷新页面,所以如果我们用Graphics绘图,那么它也需要不断的刷新

那我现在依然先假设,每一个Sprite储存的Graphics,只保存一些绘图的命令,而这些绘图命令绘图的时候,全都绘在canvas上
那么按照假设,我需要一个保存这些绘图命令的数组或者类
我现在建一个LGraphics类,这个类里面应该包含绘图指令,和show方法

function LGraphics(){
var self = this;
self.type = "LGraphics";
self.color = "#000000";
self.i = 0;
self.alpha = 1;
self.setList = new Array();
self.showList = new Array();
}
LGraphics.prototype = {
show:function (){
var self = this;
if(self.setList.length == 0)return;
//绘图
}
}

我在绘图的时候,把绘图指令全部添加到setList里面,然后调用show方法,进行绘图
另外还有一个showList,用来保存绘图的区域,作用一会就知道了
下面来解决指令如何储存的问题
给LGraphics添加方法

drawLine:function (thickness,lineColor,pointArray){
var self = this;
self.setList.push(function(){
LGlobal.canvas.beginPath();
LGlobal.canvas.moveTo(pointArray[0],pointArray[1]);
LGlobal.canvas.lineTo(pointArray[2],pointArray[3]);
LGlobal.canvas.lineWidth = thickness;
LGlobal.canvas.strokeStyle = lineColor;
LGlobal.canvas.closePath();
LGlobal.canvas.stroke();
});
},
drawRect:function (thickness,lineColor,pointArray,isfill,color){
var self = this;
self.setList.push(function(){
LGlobal.canvas.beginPath();
LGlobal.canvas.rect(pointArray[0],pointArray[1],pointArray[2],pointArray[3]);
if(isfill){
LGlobal.canvas.fillStyle = color;
LGlobal.canvas.fill();
}
LGlobal.canvas.lineWidth = thickness;
LGlobal.canvas.strokeStyle = lineColor;
LGlobal.canvas.stroke();
});
self.showList.push({type:"rect",value:pointArray});
},
drawArc:function(thickness,lineColor,pointArray,isfill,color){
var self = this;
self.setList.push(function(){
LGlobal.canvas.beginPath();
LGlobal.canvas.arc(pointArray[0],pointArray[1],pointArray[2],pointArray[3],pointArray[4],pointArray[5]);
if(isfill){
LGlobal.canvas.fillStyle = color;
LGlobal.canvas.fill();
}
LGlobal.canvas.lineWidth = thickness;
LGlobal.canvas.strokeStyle = lineColor;
LGlobal.canvas.stroke();
});
self.showList.push({type:"arc",value:pointArray});
}

三个方法分别是画一条线,一个矩形,一个圆
因为我储存的指令是function
所以,我绘图的时候,可以直接调用方法
所以,将show方法稍作修改

    show:function (){
var self = this;
if(self.setList.length == 0)return;
var key;
for(key in self.setList){
self.setList[key]();
}
}

这样绘图类就完成了,完整类一会儿请看源代码

接着,在LSprite的构造器里面加上self.graphics = new LGraphics();就可以随时进行绘图了
代码如下

backLayer = new LSprite();
addChild(backLayer);
//画一圆
backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");
//画一个矩形
backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");
//画一条线
backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);

其实,还缺点东西,因为鼠标点击LSprite判断的时候,我只判断了LSprite里保存的bitmap等,如果LSprite里面绘了图,点击的时候,也应该响应鼠标事件的,所以需要判断点击的位置是否在绘制的区域
其实,也简单,给LGraphics添加一个ismouseon方法,来判断是否被点击就可以了

ismouseon:function(event,cood){
var self = this;
var key;
for(key in self.showList){
if(self.showList[key].type == "rect"){
if(event.offsetX >= self.showList[key].value[0] + cood.x && event.offsetX <= self.showList[key].value[0] + cood.x + self.showList[key].value[2] &&
event.offsetY >= self.showList[key].value[1] + cood.y && event.offsetY <= self.showList[key].value[1] + cood.y + self.showList[key].value[3]){
return true;
}
}else if(self.showList[key].type == "arc"){
var xl = self.showList[key].value[0] + cood.x - event.offsetX;
var yl = self.showList[key].value[1] + cood.y - event.offsetY;
return xl*xl+yl*yl <= self.showList[key].value[2]*self.showList[key].value[2];
}
} return false;
}

showList里面保存着绘图的区域大小,现在派上用场了

init(80,"mylegend",800,480,main);

var backLayer;
function main(){
legendLoadOver(); backLayer = new LSprite();
addChild(backLayer); //画一圆
backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");
//画一个矩形
backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");
//画一条线
backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);
//鼠标点击判断
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);
} function onmousedown(event){
alert("isclick");
}

看一下成果吧,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas04/index.html
点击上面的矩形和圆,看看鼠标事件准不准确

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图的更多相关文章

  1. 用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

    用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 ht ...

  2. 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

    一,对比1,html5中首先看看在html5的canvas中的文字显示 var canvas = document.getElementById("myCanvas"); var ...

  3. 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...

  4. 用仿ActionScript的语法来编写html5——第七篇,自定义按钮

    第七篇,自定义按钮这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ ...

  5. 用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

    第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...

  6. 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

    一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...

  7. 用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件

    第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventLis ...

  8. 用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

    上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示.这次用Sprite来动态显示图片.依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并 ...

  9. 用仿ActionScript的语法来编写html5——第一篇,显示一张图片

    第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

随机推荐

  1. cocos2dx 富文本框,支持换行,支持神情(支持汉字截断无乱码)

    cocos2dx 富文本框,支持换行,支持表情(支持汉字截断无乱码) 小工在做了一个游戏聊天功能,里面用到插入表情的富文本和换行的问题: 先看效果,不是你要的效果,可return:(截图由于:输入的问 ...

  2. tf命令总结

    $/AutoBuild/WpfApp/WpfApp/MainWindow.xaml 发现tf workspaces /collection:http://192.168.175.117:8080/tf ...

  3. 日期类Date

    Java在日期类中封装了有关日期和时间的信息,用户可以通过调用相应的方法来获取系统时间或设置日期和时间.Date类中有很多方法在JDK1.0公布后已经过时了,在8.3中我们将介绍JDK1.0中新加的用 ...

  4. 检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件时失败解决方案

    第一种方法测试过可用:地址:http://download.csdn.net/detail/itjjfamily/8853509 下面是第二种: .NET导出Excel遇到的80070005错误的解决 ...

  5. sudo -E的意思

    1.sudo -E -E选项在man page中的解释是: -E The -E (preserve environment) option indicates to the security poli ...

  6. landa语法

    sg_orm看当前sql信息 db.IsEnableLogEvent = true; db.LogEventStarting = (sql, pa) => { var t = 0; }; //出 ...

  7. 第三篇:POSIX标准中的 “ 限制 ”

    前言 在POSIX标准中,定义了许多限制.这些限制大约分为五类,不同类型的限制获取的方式不一样. 限制值分类 1. 不变的最小值 这类型的限制值是静态的,固定的. 2. 不变值 同上 3. 运行时可以 ...

  8. 最近5年133个Java面试问题列表

    Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试,但是现在问题变得越来越高级,面试官问的问题也更深入. 在我 ...

  9. ef AddDays报错

    ef func写法,在语句中不能使用adddays方法 )); 这样写就是不行 可以改为: ); 下面是我的一个案例,虽然到了最后都没有实现功能! public List<ContractBud ...

  10. 【BZOJ3439】Kpm的MC密码 Trie树+可持久化线段树

    [BZOJ3439]Kpm的MC密码 Description 背景 想Kpm当年为了防止别人随便进入他的MC,给他的PC设了各种奇怪的密码和验证问题(不要问我他是怎么设的...),于是乎,他现在理所当 ...