Path এবং Geometry ব্যবহার করে Complex Shape তৈরি করা

XAML Graphics এবং Shape Drawing - এক্সএএমএল (XAML) - Microsoft Technologies

284

XAML (Extensible Application Markup Language) এ Path এবং Geometry ব্যবহার করে আপনি বিভিন্ন ধরনের জটিল শেপ (complex shapes) তৈরি করতে পারেন। Path একটি UI উপাদান যা বিভিন্ন ধরনের জ্যামিতিক আকৃতি এবং অ্যানিমেশন তৈরি করতে সাহায্য করে, এবং Geometry হল সেই অঙ্কনের গঠন, যা Path এর জন্য কন্টেন্ট হিসেবে কাজ করে।

XAML এ Path এবং Geometry ব্যবহৃত হয়ে বিভিন্ন জটিল আকৃতি তৈরি করা যায়, যেমন কাস্টম শেপ, আর্স, ডায়াগনাল লাইন ইত্যাদি।


Path এবং Geometry এর মৌলিক ধারণা

  1. Path: Path হল একটি UI উপাদান যা Geometry ধারণ করে এবং UI তে শেপ হিসেবে রেন্ডার হয়। Path একটি Data প্রপার্টি ধারণ করে যা সাধারণত Geometry (যেমন LineGeometry, RectangleGeometry, EllipseGeometry, PathGeometry ইত্যাদি) হিসেবে থাকে।
  2. Geometry: Geometry হল শেপের গঠন বা আকার যা Path এর মধ্যে অন্তর্ভুক্ত থাকে। এটি কাস্টম শেপ ডিজাইন করার জন্য ব্যবহৃত হয় এবং বিভিন্ন গঠন তৈরি করতে পারদর্শী।

Path এবং Geometry ব্যবহার করে Complex Shape তৈরি করা

উদাহরণ 1: PathGeometry ব্যবহার করে কাস্টম শেপ তৈরি করা

PathGeometry ব্যবহার করে কাস্টম শেপ ডিজাইন করা যায় যা বিভিন্ন PathSegment এর সমন্বয়ে তৈরি হয়, যেমন LineSegment, BezierSegment ইত্যাদি।

<Canvas Width="300" Height="300">
    <Path Fill="LightSkyBlue" Stroke="DarkBlue" StrokeThickness="2">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="50,50">
                    <LineSegment Point="150,50"/>
                    <LineSegment Point="150,150"/>
                    <LineSegment Point="50,150"/>
                    <LineSegment Point="50,50"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

এখানে:

  • PathGeometry একটি কাস্টম শেপ তৈরি করছে, যা PathFigure এর মধ্যে কয়েকটি LineSegment এর মাধ্যমে একটি বাক্স তৈরি করছে।
  • StartPoint="50,50" দ্বারা Path শুরু হচ্ছে, এবং এরপর নির্দিষ্ট পয়েন্টে লাইন সেগমেন্টগুলির মাধ্যমে একটি চতুর্ভুজ আকৃতি তৈরি হচ্ছে।

উদাহরণ 2: EllipseGeometry ব্যবহার করে এলিপস তৈরি করা

EllipseGeometry ব্যবহার করে একটি এলিপস তৈরি করা যায়।

<Canvas Width="300" Height="300">
    <Path Fill="LightCoral" Stroke="DarkRed" StrokeThickness="3">
        <Path.Data>
            <EllipseGeometry Center="150,150" RadiusX="100" RadiusY="50"/>
        </Path.Data>
    </Path>
</Canvas>

এখানে:

  • EllipseGeometry একটি এলিপস তৈরি করছে যার Center পয়েন্ট হল (150, 150), এবং RadiusX (প্রস্থের রেডিয়াস) এবং RadiusY (উচ্চতার রেডিয়াস) মান দেওয়া হয়েছে।

উদাহরণ 3: BezierSegment ব্যবহার করে কিউবিক বেজিয়ার কার্ভ

BezierSegment ব্যবহার করে কিউবিক বেজিয়ার কার্ভ তৈরি করা হয়, যা একটি বাঁকা লাইন তৈরি করে।

<Canvas Width="300" Height="300">
    <Path Stroke="Green" StrokeThickness="3">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="50,150">
                    <BezierSegment Point1="150,50" Point2="250,250" Point3="50,250"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

এখানে:

  • BezierSegment দ্বারা একটি বাঁকা লাইন তৈরি হচ্ছে। Point1, Point2, এবং Point3 হল কার্ভের নিয়ন্ত্রণ পয়েন্ট, যা শেপের আকার নির্ধারণ করে।

উদাহরণ 4: Complex Shape combining Multiple Geometries

একাধিক Geometry একত্রে ব্যবহার করে আরও জটিল শেপ তৈরি করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি আয়তক্ষেত্র এবং একটি এলিপস একসাথে ব্যবহার করা হচ্ছে।

<Canvas Width="300" Height="300">
    <Path Fill="LightGreen" Stroke="DarkGreen" StrokeThickness="2">
        <Path.Data>
            <GeometryGroup>
                <RectangleGeometry Rect="50,50,200,100"/>
                <EllipseGeometry Center="150,150" RadiusX="50" RadiusY="50"/>
            </GeometryGroup>
        </Path.Data>
    </Path>
</Canvas>

এখানে:

  • GeometryGroup ব্যবহার করে দুটি Geometry (একটি RectangleGeometry এবং একটি EllipseGeometry) একত্রে ব্যবহার করা হয়েছে।
  • এটি একটি আয়তক্ষেত্র এবং একটি এলিপস একসাথে তৈরি করে একটি কমপ্লেক্স শেপ তৈরি করছে।

Path এবং Geometry এর সুবিধা

  • কাস্টম শেপ তৈরি করা: Path এবং Geometry আপনাকে ডিফল্ট শেপের বাইরে কাস্টম শেপ তৈরি করতে সক্ষম করে, যা সৃজনশীল এবং ডাইনামিক UI তৈরি করতে ব্যবহৃত হয়।
  • অ্যানিমেশন: Path এবং Geometry এর মাধ্যমে তৈরি শেপগুলিতে অ্যানিমেশন প্রয়োগ করা সহজ এবং এগুলি সফটওয়্যার ডেভেলপমেন্টে ইন্টারেকটিভ উপাদান তৈরির জন্য ব্যবহৃত হয়।
  • বিভিন্ন শেপ সংমিশ্রণ: একাধিক Geometry ব্যবহার করে জটিল এবং বহুমাত্রিক শেপ তৈরি করা সম্ভব।

সারাংশ

  • Path UI উপাদানটি Geometry ধারণ করে এবং UI তে রেন্ডার করে।
  • Geometry শেপের গঠন যা Path এর Data প্রপার্টির মধ্যে ব্যবহার করা হয়।
  • PathGeometry, EllipseGeometry, RectangleGeometry, LineGeometry, BezierSegment ইত্যাদি Geometry এর প্রকারভেদ।
  • GeometryGroup এর মাধ্যমে একাধিক Geometry একত্রে ব্যবহার করা যায়।

এই প্রযুক্তিগুলি ব্যবহার করে আপনি কাস্টম শেপ, অ্যানিমেশন এবং জটিল আকৃতি তৈরি করতে পারবেন যা আপনার UI কে আরো আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।

Content added By
Promotion

Are you sure to start over?

Loading...