এক্সএনএ-তে গোলাকার কোণা?

Question

প্রিমিটিভস (লাইন-রেখাচিত্রমালা) এর মাধ্যমে এক্সএনএ রেন্ডার করা একটি আয়তক্ষেত্রে আমি বৃত্তাকার কোণগুলি তৈরি করতে পারি এমন কোনও উপায় আছে কি? আমি আমার ইউআইটিকে ইতিমধ্যে কিছুটা অভিনব করে তুলতে চাই, এবং আমি কোডটি নমনীয় হতে চাই, যাতে অনেকগুলি টেক্সচার যুক্ত না হয়।

Comments

মূলত: লাইনের জন্য একটি টেক্সচার ব্যবহার করুন, লাইনটির বৃত্তাকার প্রান্তগুলির জন্য একটি টেক্সচার ব্যবহার করুন। এই দুটি টেক্সচার যথাযথভাবে ব্যবহার করে এমন স্প্রেটগুলি ঘোরান এবং স্কেল করুন।

— ওলহভস্কি

Answer 1

আপনি আপনার আদিমকে রেন্ডার করতে পারেন এবং একটি শেডার তৈরি করতে পারেন যা এই বৃত্তাকার কোণগুলি তৈরি করতে পারে।
সিউডোকোডে এখানে একটি সাধারণ পিক্সেল শেডার যা একটি বৃত্তাকার স্কোয়ার আঁকতে পারে:

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)

এই পিক্সেল শেডার ফলাফল:

আপনি যদি শেডারগুলি ব্যবহার করেন, আপনি সত্যই অভিনব UI করতে পারেন, এমনকি একটি অ্যানিমেটেডও।

আমার পক্ষে প্রোটোটাইপ করা সহজ পিক্সেলের শেডারগুলি হল প্রোগ্রাম ইভালড্র

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

হ্যাঁ, এটি সরাসরি প্রশ্নের উত্তর দেয় না - তবে এখনও কেউ এটি দরকারী বলে মনে করতে পারেন।

— জোনাথন ডিকিনসন

এটিকে নয়-প্যাচ বলা হয় এবং শেডার ব্যবহার করার চেয়ে এটি আসলে অনেক বেশি নমনীয় (এবং সস্তার!) যেহেতু আপনি কোনও টেক্সচারের সাথে দেখতে চাইলেও দেখতে এটি তৈরি করতে পারেন। তারপরে আপনি আপনার উইজেট চিত্রগুলি একক টেক্সচার অ্যাটলাসে রাখতে পারেন। বেশিরভাগ জিইআইআই এটি এইভাবে করে।

— এলিসি

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();

— লিওনার্দো স্যাক্সিয়া

আপনার টেক্সচারটি কেবল একটি নীল পিক্সেল, এই পদ্ধতির ধারণাটি বৃত্তাকার কোণগুলি আপনার জমিনের অংশ are

— sdgfsdh

দুঃখিত - প্ল্যাটফর্মে খুব নতুন ... এত তাড়াতাড়ি আমার কাছে ফিরে আসার জন্য ধন্যবাদ

— লিওনার্দো সেকিয়া