{"id":411,"date":"2009-09-18T14:21:32","date_gmt":"2009-09-18T21:21:32","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2213"},"modified":"2009-09-18T14:21:32","modified_gmt":"2009-09-18T21:21:32","slug":"seamless-vector-texture","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=411","title":{"rendered":"Seamless Vector Texture"},"content":{"rendered":"
\r\n[SWF(width = 800, height = 450, backgroundColor=0xFFFFFF)]\r\n\r\ngraphics.beginFill(0xDEDEDE);\r\ngraphics.drawRect(0,0,400,400);\r\n\r\nvar container:Sprite = Sprite(addChild(new Sprite()));\r\ndraggable(rx(), ry(), 0x112233, 20);\r\ndraggable(rx(), ry(), 0x2266FF, 15);\r\ndraggable(rx(), ry(), 0x003299, 50, "rect");\r\ndraggable(rx(), ry(), 0xFFFFFF, 30);\r\ndraggable(rx(), ry(), 0x00CCFF, 15);\r\ndraggable(rx(), ry(), 0x1188CC, 50, "rect");\r\n\r\nfunction rx():Number{\r\n\treturn Math.random() * 200 + 100;\r\n}\r\nfunction ry():Number{\r\n\treturn Math.random() * 200 + 100;\r\n}\r\n\r\nvar guides:Shape = Shape(addChild(new Shape()));\r\nwith(guides.graphics){\r\n       lineStyle(0, 0x666666)\r\n       moveTo(200,0);\r\n       lineTo(200,400);\r\n       moveTo(0, 200);\r\n       lineTo(400, 200);\r\n       moveTo(400,0);\r\n\t   lineTo(400,400);\r\n\t   moveTo(0,400);\r\n\t   lineTo(800,400);\r\n}\r\n\r\nvar canvas:BitmapData = new BitmapData(200,200,true, 0x00000000);\r\nvar tex:BitmapData = new BitmapData(800,800,false, 0xFFFFFF);\r\n\r\nvar frame:Bitmap = Bitmap(addChild(new Bitmap(tex, "auto", true)));\r\nframe.x = 401;\r\nframe.scaleX = frame.scaleY = 0.5;\r\n\r\nvar pnt:Point = new Point();\r\nvar m:Matrix = new Matrix();\r\n\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\tcanvas.fillRect(canvas.rect, 0x00000000);\r\n\tcanvas.draw(container);\r\n\tdrawQuadrant(-200,0)\r\n\tdrawQuadrant(-400,0)\r\n\tdrawQuadrant(0,-200)\r\n\tdrawQuadrant(-200,-200);\r\n\ttex.fillRect(tex.rect, 0xFFFFFF);\r\n\tfor (var i:int = 0; i<16; i++){\r\n\t\tvar px:Number = i % 4;\r\n\t\tvar py:Number = int(i \/ 4);\r\n\t\tpnt.x = px * 200;\r\n\t\tpnt.y = py * 200;\r\n\t\ttex.copyPixels(canvas, canvas.rect, pnt, null, null, true);\r\n       }\r\n}\r\n\r\nfunction drawQuadrant(x:Number, y:Number):void{\r\n\t m.tx = x;\r\n\t m.ty = y;\r\n\t canvas.draw(container, m);\r\n}\r\n\r\n\/\/ draggable Sprite\r\nfunction draggable(xp:Number, yp:Number, col:uint = 0xFF0000,\r\nsize:Number=4, type:String="circle"):Sprite {\r\n       var s:Sprite = Sprite(container.addChild(new Sprite()));\r\n       s.x = xp;\r\n       s.y = yp;\r\n       with(s.graphics){\r\n               beginFill(col)\r\n               if(type == "circle"){\r\n                 drawCircle(size,size,size);\r\n               }else if(type == "rect"){\r\n                 drawRect(0,0,size, size);\r\n               }\r\n       }\r\n       s.buttonMode = true;\r\n       s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);\r\n       return s;\r\n}\r\nfunction onDrag(evt:MouseEvent):void {\r\n\tvar w:Number = evt.currentTarget.width;\r\n\tvar h:Number = evt.currentTarget.height;\r\n\tevt.currentTarget.startDrag(false, new Rectangle(0,0,400 - w, 400 - h));\r\n}\r\nstage.addEventListener(MouseEvent.MOUSE_UP, onUp);\r\nfunction onUp(evt:MouseEvent):void{ stopDrag() }\r\n<\/pre>\n
This snippet creates a seamless texture from a few draggable vector shapes. BitmapData is used to combine four quadrants into one seamless tile.<\/p>\n

\nHave a look at the swf<\/p>\n
<\/a>