·您当前的位置:首页 > 技术教程 > AS2与AS3技术 >

[AS3]as3仿dz的图片八个方向的裁切框功能代码参考

时间:2013-10-16 11:19dewen.org
原理:图片裁剪框,实际就是一个Shape或者Sprite,里面包含了四个或者八个控制方块(控制区),这些控制区根据鼠标事件移动改变裁剪区的大小。

说下原理:
图片裁剪框,实际就是一个Shape或者Sprite,里面包含了四个或者八个控制方块(控制区),这些控制区根据鼠标事件移动改变裁剪区的大小。

从以前做的一个项目中拿出来的,稍微修改了下,可以直接使用:

  1. addChild(new Clip());//支持八个方向任意调整 
  1. package  { 
  2. import flash.display.Bitmap; 
  3. import flash.display.BitmapData; 
  4. import flash.display.Sprite; 
  5. import flash.events.Event; 
  6. import flash.events.MouseEvent; 
  7.  
  8. public class Clip extends Sprite { 
  9. private var m_selectBox:Bitmap; 
  10. private var m_dotBmpd:BitmapData; 
  11. private var m_dotTopLeft:Sprite; 
  12. private var m_dotTop:Sprite; 
  13. private var m_dotTopRight:Sprite; 
  14. private var m_dotLeft:Sprite; 
  15. private var m_dotRight:Sprite; 
  16. private var m_dotBottomLeft:Sprite; 
  17. private var m_dotBottom:Sprite; 
  18. private var m_dotBottomRight:Sprite; 
  19. private var m_target:Sprite; 
  20.  
  21. private var m_dotWidth:uint; 
  22. private var m_dotHeight:uint; 
  23. private var m_oldMouseX:int; 
  24. private var m_oldMouseY:int; 
  25.  
  26. public function Clip() { 
  27. this.m_selectBox = new Bitmap(new BitmapData(10, 10, true, 0x20ff0000)); 
  28. this.m_dotBmpd = new BitmapData(5, 5, false, 0); 
  29. this.createSelection(); 
  30. } 
  31.  
  32. private function createSelection():void { 
  33. this.addChild(this.m_selectBox); 
  34. var bmd:BitmapData = this.m_dotBmpd; 
  35. this.m_dotWidth = bmd.width; 
  36. this.m_dotHeight = bmd.height; 
  37.  
  38. this.m_dotLeft = new Sprite(); 
  39. this.m_dotLeft.addChild(new Bitmap(bmd)); 
  40. this.m_dotRight = new Sprite(); 
  41. this.m_dotRight.addChild(new Bitmap(bmd)); 
  42. this.addChild(this.m_dotLeft); 
  43. this.addChild(this.m_dotRight); 
  44. this.m_dotLeft.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  45. this.m_dotRight.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  46.  
  47. this.m_dotTop = new Sprite(); 
  48. this.m_dotTop.addChild(new Bitmap(bmd)); 
  49. this.m_dotBottom = new Sprite(); 
  50. this.m_dotBottom.addChild(new Bitmap(bmd)); 
  51. this.addChild(this.m_dotTop); 
  52. this.addChild(this.m_dotBottom); 
  53. this.m_dotTop.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  54. this.m_dotBottom.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  55.  
  56. this.m_dotBottomLeft = new Sprite(); 
  57. this.m_dotBottomLeft.addChild(new Bitmap(bmd)); 
  58. this.m_dotBottomRight = new Sprite(); 
  59. this.m_dotBottomRight.addChild(new Bitmap(bmd)); 
  60. this.m_dotTopLeft = new Sprite(); 
  61. this.m_dotTopLeft.addChild(new Bitmap(bmd)); 
  62. this.m_dotTopRight = new Sprite(); 
  63. this.m_dotTopRight.addChild(new Bitmap(bmd)); 
  64. this.addChild(this.m_dotBottomLeft); 
  65. this.addChild(this.m_dotBottomRight); 
  66. this.addChild(this.m_dotTopLeft); 
  67. this.addChild(this.m_dotTopRight); 
  68. this.m_dotBottomLeft.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  69. this.m_dotBottomRight.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  70. this.m_dotTopLeft.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  71. this.m_dotTopRight.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); 
  72.  
  73. this.m_selectBox.width = 100; 
  74. this.m_selectBox.height = 100; 
  75. this.updateDotPosition(); 
  76. } 
  77.  
  78. private function updateDotPosition():void { 
  79. var width:uint = this.m_selectBox.width; 
  80. var height:uint = this.m_selectBox.height; 
  81. var dotHalfWidth:uint = this.m_dotWidth >> 1; 
  82. var dotHalfHeight:uint = this.m_dotHeight >> 1; 
  83. this.m_dotLeft.x = -dotHalfWidth + this.m_selectBox.x; 
  84. this.m_dotRight.x = width - dotHalfWidth - 1 + this.m_selectBox.x; 
  85. thisthis.m_dotLeft.y = this.m_dotRight.y = (height >> 1) - dotHalfHeight + this.m_selectBox.y; 
  86. thisthis.m_dotTop.x = this.m_dotBottom.x = (width >> 1) - dotHalfWidth + this.m_selectBox.x; 
  87. this.m_dotTop.y = -dotHalfHeight + this.m_selectBox.y; 
  88. this.m_dotBottom.y = height - dotHalfHeight - 1 + this.m_selectBox.y; 
  89. thisthis.m_dotTopLeft.x = this.m_dotBottomLeft.x = -dotHalfWidth + this.m_selectBox.x; 
  90. thisthis.m_dotTopLeft.y = this.m_dotTopRight.y = -dotHalfHeight + this.m_selectBox.y; 
  91. thisthis.m_dotBottomLeft.y = this.m_dotBottomRight.y = height - dotHalfHeight - 1 + this.m_selectBox.y; 
  92. thisthis.m_dotTopRight.x = this.m_dotBottomRight.x = width - dotHalfWidth - 1 + this.m_selectBox.x; 
  93. } 
  94.  
  95. private function mouseEventHandler(evt:MouseEvent):void { 
  96. switch(evt.type) { 
  97. case MouseEvent.MOUSE_DOWN: 
  98. evt.stopImmediatePropagation(); 
  99. this.m_oldMouseX = stage.mouseX; 
  100. this.m_oldMouseY = stage.mouseY; 
  101. this.m_target = Sprite(evt.currentTarget); 
  102. stage.addEventListener(MouseEvent.MOUSE_MOVE, this.mouseEventHandler); 
  103. stage.addEventListener(MouseEvent.MOUSE_UP, this.mouseEventHandler); 
  104. break; 
  105. case MouseEvent.MOUSE_UP: 
  106. this.stopDrag(); 
  107. this.m_target = null; 
  108. stage.removeEventListener(MouseEvent.MOUSE_MOVE, this.mouseEventHandler); 
  109. stage.removeEventListener(MouseEvent.MOUSE_UP, this.mouseEventHandler); 
  110. break; 
  111. case MouseEvent.MOUSE_MOVE: 
  112. var offsetX:int = stage.mouseX - this.m_oldMouseX; 
  113. var offsetY:int = stage.mouseY - this.m_oldMouseY; 
  114. var width:uint = this.m_selectBox.width; 
  115. var height:uint = this.m_selectBox.height; 
  116. switch(this.m_target) { 
  117. case this.m_dotTop: 
  118. this.changeHeightY(offsetY, height, this.m_dotBottom); 
  119. break; 
  120. case this.m_dotBottom: 
  121. this.changeHeight(offsetY, height, this.m_dotTop); 
  122. break; 
  123. case this.m_dotLeft: 
  124. this.changeWidthX(offsetX, width, this.m_dotRight); 
  125. break; 
  126. case this.m_dotRight: 
  127. this.changeWidth(offsetX, width, this.m_dotLeft); 
  128. break; 
  129. case this.m_dotTopLeft: 
  130. this.changeWidthX(offsetX, width, this.m_dotTopRight); 
  131. if (this.m_target == this.m_dotTopRight) { 
  132. this.changeHeightY(offsetY, height, this.m_dotBottomRight); 
  133. }else { 
  134. this.changeHeightY(offsetY, height, this.m_dotBottomLeft); 
  135. } 
  136. break; 
  137. case this.m_dotTopRight: 
  138. this.changeWidth(offsetX, width, this.m_dotTopLeft); 
  139. if (this.m_target == this.m_dotTopLeft) { 
  140. this.changeHeightY(offsetY, height, this.m_dotBottomLeft); 
  141. }else { 
  142. this.changeHeightY(offsetY, height, this.m_dotBottomRight); 
  143. } 
  144. break; 
  145. case this.m_dotBottomLeft: 
  146. this.changeWidthX(offsetX, width, this.m_dotBottomRight); 
  147. if (this.m_target == this.m_dotBottomRight) { 
  148. this.changeHeight(offsetY, height, this.m_dotTopRight); 
  149. }else { 
  150. this.changeHeight(offsetY, height, this.m_dotTopLeft); 
  151. } 
  152. break; 
  153. case this.m_dotBottomRight: 
  154. this.changeWidth(offsetX, width, this.m_dotBottomLeft); 
  155. if (this.m_target == this.m_dotBottomLeft) { 
  156. this.changeHeight(offsetY, height, this.m_dotTopLeft); 
  157. }else { 
  158. this.changeHeight(offsetY, height, this.m_dotTopRight); 
  159. } 
  160. break; 
  161. } 
  162. break; 
  163. } 
  164. } 
  165.  
  166. private function changeWidth(offset:int, width:uint, nextTarget:Sprite):void { 
  167. if (offset == 0) return; 
  168. offset = width + offset; 
  169. if (offset < 1) { 
  170. this.m_selectBox.x += offset; 
  171. this.m_selectBox.width = Math.abs(offset) + 1; 
  172. this.m_target = nextTarget; 
  173. }else { 
  174. this.m_selectBox.width = offset; 
  175. } 
  176. this.m_oldMouseX = stage.mouseX; 
  177. this.updateDotPosition(); 
  178. } 
  179. private function changeWidthX(offset:int, width:uint, nextTarget:Sprite):void { 
  180. if (offset == 0) return; 
  181. offset = width - offset; 
  182. if (offset < 1) { 
  183. this.m_selectBox.x += width - 1; 
  184. this.m_selectBox.width = Math.abs(offset) + 1; 
  185. this.m_target = nextTarget; 
  186. }else { 
  187. this.m_selectBox.width = offset; 
  188. this.m_selectBox.x += width - offset; 
  189. } 
  190. this.m_oldMouseX = stage.mouseX; 
  191. this.updateDotPosition(); 
  192. } 
  193. private function changeHeight(offset:int, height:uint, nextTarget:Sprite):void { 
  194. if (offset == 0) return; 
  195. offset = height + offset; 
  196. if (offset < 1) { 
  197. this.m_selectBox.y += offset; 
  198. this.m_selectBox.height = Math.abs(offset) + 1; 
  199. this.m_target = nextTarget; 
  200. }else { 
  201. this.m_selectBox.height = offset; 
  202. } 
  203. this.m_oldMouseY = stage.mouseY; 
  204. this.updateDotPosition(); 
  205. } 
  206. private function changeHeightY(offset:int, height:uint, nextTarget:Sprite):void { 
  207. if (offset == 0) return; 
  208. offset = height - offset; 
  209. if (offset < 1) { 
  210. this.m_selectBox.y += height - 1; 
  211. this.m_selectBox.height = Math.abs(offset) + 1; 
  212. this.m_target = nextTarget; 
  213. }else { 
  214. this.m_selectBox.height = offset; 
  215. this.m_selectBox.y += height - offset; 
  216. } 
  217. this.m_oldMouseY = stage.mouseY; 
  218. this.updateDotPosition(); 
  219. } 
  220. } 
  221. } 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器