XNA में गोल कोनों?

Question

क्या कोई ऐसा तरीका है जिससे मैं XNA में प्राइमेटीज़ (लाइन-स्ट्रिप्स) के माध्यम से प्रस्तुत आयत पर गोल कोने बना सकता हूँ? मैं अपने UI को पहले से कुछ अधिक फैंसी बनाना चाहता हूं, और मैं चाहूंगा कि कोड लचीला हो, जिसमें बहुत सारे बनावट शामिल नहीं हैं।

Comments

मूल रूप से: लाइन के लिए एक बनावट, लाइन के गोल सिरों के लिए एक बनावट का उपयोग करें। बारी बारी से और पैमाने स्प्राइट कि इन दो बनावट का उचित उपयोग करें।

— ओलहोवस्की

Answer 1

आप अपने आदिम को रेंडर कर सकते हैं, और एक शेडर बना सकते हैं जो इन गोल कोनों को बना सकते हैं।
यहाँ pseudocode में एक साधारण पिक्सेल शेड है जो एक गोल वर्ग खींच सकता है:

xDist = abs(x-0.5)
yDist = abs(y-0.5)
xD = xDist*xDist*4
yD = yDist*yDist*4
alpha = floor((1-xD)*(1-yD)*5)

इस पिक्सेल shader का परिणाम:

यदि आप शेड्स का उपयोग करते हैं, तो आप वास्तव में फैंसी यूआई बना सकते हैं, यहां तक ​​कि एक एनिमेटेड भी।

मेरे लिए प्रोटोटाइप सरल पिक्सेल शेड्स के लिए महान है प्रोग्राम EvalDraw

Answer 2

ऐसा करने का एक और तरीका 'बटन खिंचाव' (जिसे 'बॉक्स खिंचाव' या 'नौ-पैच' भी कहा जाता है) का उपयोग करना है। अनिवार्य रूप से आप एक छवि बनाते हैं जो 9 भागों से बना होता है:

किसी भी आकार में उस बटन को खींचने के लिए, आप प्रत्येक टुकड़ा (ऊपर से नीचे, बाएं से दाएं) खींचते हैं:

1. गंतव्य आयत के शीर्ष बाईं ओर बिना खींचा हुआ।
2. width - ((1) + (2)).Width(1) की चौड़ाई से बाएं ऑफसेट के साथ, गंतव्य आयत के शीर्ष पर क्षैतिज रूप से (साथ ) ड्रा करें ।
3. गंतव्य आयत के शीर्ष दाईं ओर बिना बांधा ड्रा।
4. height - ((1) + (2)).Height(1) की ऊंचाई से शीर्ष ऑफसेट के साथ, गंतव्य आयत के बाईं ओर खड़ी (साथ ) स्केल करें ।
5. दोनों दिशाओं (2 की चौड़ाई) और (4) की ऊंचाई के साथ, (1) की चौड़ाई और ऊंचाई से ऑफसेट ड्रा करें।
6. गंतव्य आयत के दाईं ओर लंबवत (समान ऊँचाई (4)) ड्रा करें, (1) की ऊँचाई से ऑफसेट करें।
7. गंतव्य आयत के नीचे बाईं ओर बिना खींचा हुआ।
8. मंजिल आयत के तल पर क्षैतिज (समान ऊंचाई) (2) के रूप में ड्रा करें, (1) की चौड़ाई से ऑफसेट करें।
9. गंतव्य आयत के नीचे दाईं ओर बिना अंकित ड्रा।

यदि आप बटन को देखते हैं, तो आप देखेंगे कि यह कोई फर्क नहीं पड़ता अगर (2), (5) और (7) क्षैतिज रूप से बढ़े हुए हैं (क्योंकि यह अनिवार्य रूप से एक सीधी रेखा है); उसी तरह (4), (5) और (6) को छवि की गुणवत्ता को प्रभावित किए बिना लंबवत रूप से बढ़ाया जा सकता है।

Comments

हां, यह सीधे सवाल का जवाब नहीं देता है - लेकिन कोई इसे अभी भी उपयोगी पा सकता है।

— जोनाथन डिकिंसन

यह एक नौ-पैच कहा जाता है और वास्तव में बहुत अधिक लचीला (और सस्ता है) एक shader का उपयोग करने की तुलना में जब से आप इसे बनावट के साथ चाहते हैं, तब इसे देख सकते हैं। फिर आप अपनी सभी विजेट छवियों को एक एकल बनावट एटलस में रख सकते हैं। अधिकांश GUI इस तरह से करते हैं।

— एलिसा

Answer 3

यहाँ "नौ-पैच" दृष्टिकोण के लिए कोड है:

public static class SpriteBatchExtensions
{
    public static void DrawRoundedRect(this SpriteBatch spriteBatch, Rectangle destinationRectangle, 
        Texture2D texture, int border, Color color)
    {
        // Top left
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location, new Point(border)), 
            new Rectangle(0, 0, border, border), 
            color);

        // Top
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(border, 0), 
                new Point(destinationRectangle.Width - border * 2, border)), 
            new Rectangle(border, 0, texture.Width - border * 2, border), 
            color);

        // Top right
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(destinationRectangle.Width - border, 0), new Point(border)), 
            new Rectangle(texture.Width - border, 0, border, border), 
            color);

        // Middle left
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(0, border), new Point(border, destinationRectangle.Height - border * 2)), 
            new Rectangle(0, border, border, texture.Height - border * 2), 
            color);

        // Middle
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(border), destinationRectangle.Size - new Point(border * 2)), 
            new Rectangle(border, border, texture.Width - border * 2, texture.Height - border * 2), 
            color);

        // Middle right
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(destinationRectangle.Width - border, border), 
                new Point(border, destinationRectangle.Height - border * 2)), 
            new Rectangle(texture.Width - border, border, border, texture.Height - border * 2), 
            color);

        // Bottom left
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(0, destinationRectangle.Height - border), new Point(border)), 
            new Rectangle(0, texture.Height - border, border, border), 
            color);

        // Bottom
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(border, destinationRectangle.Height - border), 
                new Point(destinationRectangle.Width - border * 2, border)), 
            new Rectangle(border, texture.Height - border, texture.Width - border * 2, border), 
            color);

        // Bottom right
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + destinationRectangle.Size - new Point(border), new Point(border)), 
            new Rectangle(texture.Width - border, texture.Height - border, border, border), 
            color);
    }
}

यह इस प्रकार है:

spriteBatch.DrawRoundedRect(
    dest, // The coordinates of the Rectangle to be drawn
    rectangleTexture, // Texture for the whole rounded rectangle
    16, // Distance from the edges of the texture to the "middle" patch
    Color.OrangeRed);

Comments

यह मेरे लिए काम नहीं करता है ... मुझे बस एक सामान्य आयत मिलती है। इस तरह से मैंने इसका उपयोग कियाTexture2D _texture = new Texture2D(GraphicsDevice, 1, 1); _texture.SetData(new Color[] { Color.Blue }); SpriteBatch sb = new SpriteBatch(GraphicsDevice); sb.Begin(); //sb.Draw(_texture, new Rectangle(100, 100, 100, 100), Color.White); sb.DrawRoundedRect(_texture, new Rectangle(100, 100, 100, 100), Color.Pink, 16); sb.End();

— लियोनार्डो सेकिया

आपकी बनावट सिर्फ एक नीली पिक्सेल है, यह दृष्टिकोण मानता है कि गोल कोनों आपकी बनावट का हिस्सा हैं।

— sdgfsdh

खेद - मंच के लिए बहुत नया ... मुझे इतनी जल्दी वापस पाने के लिए धन्यवाद

— लियोनार्डो सेकिया