actionscript3.0 画图问题

发布网友发布时间：2022-05-12 04:37

共3个回答

懂视网时间：2022-05-12 08:59

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"); 
}

热心网友时间：2022-05-12 06:07

Sprite有graphics属性，你的自定义的makeCircle类继承自Sprite，所以不用导入Graphics类
makeCircle方法中使用Graphics等于使用了一个新的类，但是却没有创建类的实例，又不是静态方法或属性，所以会报错
修改方法很简单：把你的makeCircle函数中的Graphics改成graphics就可以了。
package {

import flash.display.Sprite;
//import flash.display.Graphics;这句可以删除；

public class makeCircle extends Sprite {

public function makeCircle()
{
graphics.lineStyle(1,0,1);
graphics.drawCircle(100,100,12);
}

}
}

热心网友时间：2022-05-12 07:25

1、Graphics是类名，Graphics后加.是访问其静态方法或属性，想使用Graphics类中的drawCircle方法，必须是graphics.drawCircle，（可能你是在大小写上忽略了）
2、Sprite（精灵）Sprite就是没有时间轴的影片剪辑。Sprite是基本显示列表构造块，在不需要时间轴时，经常用于用户界面组件的逻辑基类
（在不需要时间轴时，显示界面基本都是继承Sprite类的）