fengFanYong Posted November 14, 2016 Share Posted November 14, 2016 hello i create a sprite,and set it is width and height,the graphics is sprite children,How am i set the graphics border; code : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text border</title> <script src="../pixi/pixi.min.js"></script> <style> *{ margin: 0; padding: 0; } </style> </head> <body> <script> var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {antialias: true}); document.body.appendChild(renderer.view); sp = new PIXI.Sprite(); sp.x = 100; sp.y = 100; sp.width = 200; sp.height = 400; gt = new PIXI.Graphics(); gt.beginFill(0x123123); gt.lineStyle(.01,0xFFFFFF,1); gt.drawRoundedRect(0,0,1,1,.1); gt.endFill(); sp.addChild(gt); renderer.render(sp); </script> </body> </html> if i draw a width != height;the border height > border width. Quote Quote Link to comment Share on other sites More sharing options...
Vitalije Posted November 15, 2016 Share Posted November 15, 2016 I am not sure that I understood what do you want to achieve but there are few things that I can see you did wrong in the above code. You have created empty sprite and setting width and height on the empty sprite has no effect. Instead you should provide Texture argument to create Sprite. Texture you can get out of Graphics like so: gt = new PIXI.Graphics(); gt.beginFill(0x123123); gt.lineStyle(.01,0xFFFFFF,1); gt.drawRoundedRect(0,0,1,1,.1); gt.endFill(); var texture = gt.generateCanvasTexture(); // and then create sprite sp = new PIXI.Sprite(texture); sp.x = 100; sp.y = 100; sp.width = 200; sp.height = 400; HTH Vitalije Quote Link to comment Share on other sites More sharing options...
fengFanYong Posted November 16, 2016 Author Share Posted November 16, 2016 but the top of border > left of border Quote Link to comment Share on other sites More sharing options...
Vitalije Posted November 16, 2016 Share Posted November 16, 2016 Quote but the top of border > left of border That is because you drawRoundedRect that has same witdth and height, and later make sprite that has height twice as width. Try: ... gt.drawRoundedRect(0,0,1,2,.1); // or even // gt.lineStyle(2, 0xFFFFFF, 1); // gt.drawRoundedRect(0, 0, 200, 400, 0.1); gt.endFill(); var texture = gt.generateCanvasTexture(); ... HTH Vitalije Quote Link to comment Share on other sites More sharing options...
fengFanYong Posted November 18, 2016 Author Share Posted November 18, 2016 Is there any other way？ if sprite children is the text,the text will is out of shap; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.