Compose-এর সাহায্যে, আপনি বহুভুজ থেকে তৈরি আকার তৈরি করতে পারবেন। যেমন, আপনি নিম্নলিখিত ধরনের আকার তৈরি করতে পারবেন:
Compose-এ কাস্টম রাউন্ডেড পলিগন তৈরি করতে, আপনার
app/build.gradle-এ
graphics-shapes ডিপেন্ডেন্সি যোগ করুন:
implementation "androidx.graphics:graphics-shapes:1.0.1"
এই লাইব্রেরির সাহায্যে আপনি বহুভুজ থেকে তৈরি আকার তৈরি করতে পারবেন। বহুভুজাকৃতি আকারে শুধুমাত্র সরল প্রান্ত ও তীক্ষ্ণ কোণ থাকলেও, এইসব আকারে ঐচ্ছিক গোলাকার কোণ থাকে। এটি দুটি আলাদা আকৃতির মধ্যে মরফ করা সহজ করে তোলে। যেকোনও আকারের মধ্যে মরফিং করা কঠিন এবং এটি সাধারণত ডিজাইন-টাইম সমস্যা। কিন্তু এই লাইব্রেরি একই ধরনের বহুভুজাকার গঠন সহ এইসব আকৃতির মধ্যে মরফ করার মাধ্যমে এটিকে সহজ করে তোলে।
বহুভুজ তৈরি করা
নিম্নলিখিত স্নিপেটটি অঙ্কন ক্ষেত্রের কেন্দ্রে ৬টি পয়েন্ট সহ একটি প্রাথমিক বহুভুজ আকৃতি তৈরি করে:
Box( modifier = Modifier .drawWithCache { val roundedPolygon = RoundedPolygon( numVertices = 6, radius = size.minDimension / 2, centerX = size.width / 2, centerY = size.height / 2 ) val roundedPolygonPath = roundedPolygon.toPath().asComposePath() onDrawBehind { drawPath(roundedPolygonPath, color = Color.Blue) } } .fillMaxSize() )
এই উদাহরণে, লাইব্রেরি একটি RoundedPolygon তৈরি করে যা
অনুরোধ করা শেপের জ্যামিতি ধারণ করে। Compose অ্যাপে সেই শেপটি আঁকতে হলে,
আপনাকে অবশ্যই সেটির থেকে Path অবজেক্ট পেতে হবে, যাতে শেপটি এমন একটি ফর্মের মধ্যে থাকে যা Compose
আঁকতে জানে।
বহুভুজের কোণগুলি গোলাকার করা
বহুভুজের কোণগুলি গোলাকার করতে, CornerRounding প্যারামিটার ব্যবহার করুন। এর জন্য
দুটি প্যারামিটার, radius ও smoothing প্রয়োজন। প্রতিটি গোলাকার কোণ ১-৩টি কিউবিক কার্ভ দিয়ে তৈরি, যার কেন্দ্রে একটি বৃত্তাকার আর্কের মতো আকার রয়েছে, যেখানে দুটি
পাশের ("ফ্ল্যাঙ্কিং") কার্ভ, আকারটির প্রান্ত থেকে কেন্দ্রীয় কার্ভে ট্রানজিশন করে।
ব্যাসার্ধ
radius হল কোনও শীর্ষবিন্দুকে গোলাকার করার জন্য ব্যবহৃত বৃত্তের ব্যাসার্ধ।
যেমন, নিম্নলিখিত গোলাকার কোণযুক্ত ত্রিভুজটি এইভাবে তৈরি করা হয়েছে:
r রাউন্ডেড কোণের
বৃত্তাকার রাউন্ডিং সাইজ নির্ধারণ করে।স্মুথ করা
স্মুথিং হল এমন একটি ফ্যাক্টর যা নির্ধারণ করে যে কোণার
বৃত্তাকার রাউন্ডিং অংশ থেকে প্রান্তে পৌঁছাতে কত সময় লাগে। স্মুথ করার ফ্যাক্টর 0
(আনস্মুথ করা, CornerRounding-এর ডিফল্ট ভ্যালু) হলে কোণগুলি পুরোপুরি বৃত্তাকার
হয়ে যায়। শূন্য নয় এমন স্মুথিং ফ্যাক্টর (সর্বাধিক ১.০ পর্যন্ত) থাকলে
কোণটি তিনটি আলাদা কার্ভ দিয়ে রাউন্ড করা হয়।
যেমন, নিচের স্নিপেটে স্মুথিংয়ের মান ০ ও ১ সেট করার মধ্যে সূক্ষ্ম পার্থক্য দেখানো হয়েছে:
Box( modifier = Modifier .drawWithCache { val roundedPolygon = RoundedPolygon( numVertices = 3, radius = size.minDimension / 2, centerX = size.width / 2, centerY = size.height / 2, rounding = CornerRounding( size.minDimension / 10f, smoothing = 0.1f ) ) val roundedPolygonPath = roundedPolygon.toPath().asComposePath() onDrawBehind { drawPath(roundedPolygonPath, color = Color.Black) } } .size(100.dp) )
সাইজ ও পজিশন
ডিফল্ট হিসেবে, সেন্টারের (0, 0) চারপাশে 1 ব্যাসার্ধ সহ একটি শেপ তৈরি করা হয়।
এই ব্যাসার্ধটি সেই বহুভুজের সেন্টার ও বাইরের শীর্ষবিন্দুর মধ্যে দূরত্বকে বোঝায়
যার উপর ভিত্তি করে শেপটি তৈরি করা হয়। মনে রাখবেন, কোণগুলি রাউন্ড করলে
আকৃতিটি ছোট হয়ে যায়, কারণ রাউন্ড করা কোণগুলি রাউন্ড করা শীর্ষবিন্দুর তুলনায়
কেন্দ্রের কাছাকাছি থাকে। কোনও বহুভুজকে সাইজ করতে, radius
ভ্যালু অ্যাডজাস্ট করুন। পজিশন অ্যাডজাস্ট করতে, বহুভুজের centerX বা centerY পরিবর্তন করুন।
অথবা, অবজেক্টের সাইজ, পজিশন ও রোটেশন পরিবর্তন করতে
স্ট্যান্ডার্ড DrawScope ট্রান্সফর্মেশন ফাংশন ব্যবহার করুন, যেমন
DrawScope#translate()।
শেপ মর্ফ করা
Morph অবজেক্ট হল একটি নতুন শেপ যা দুটি বহুভুজাকার
শেপের মধ্যে অ্যানিমেশনকে উপস্থাপন করে। দুটি শেপের মধ্যে মরফ করতে, দুটি RoundedPolygons এবং একটি Morph
অবজেক্ট তৈরি করুন যা এই দুটি শেপ নেয়। শুরু ও শেষ শেপের মধ্যে কোনও শেপ গণনা করতে,
শুরু (০) ও শেষ (১) শেপের মধ্যে সেটির
ফর্ম নির্ধারণ করতে, শূন্য ও এক-এর মধ্যে progress ভ্যালু দিন:
Box( modifier = Modifier .drawWithCache { val triangle = RoundedPolygon( numVertices = 3, radius = size.minDimension / 2f, centerX = size.width / 2f, centerY = size.height / 2f, rounding = CornerRounding( size.minDimension / 10f, smoothing = 0.1f ) ) val square = RoundedPolygon( numVertices = 4, radius = size.minDimension / 2f, centerX = size.width / 2f, centerY = size.height / 2f ) val morph = Morph(start = triangle, end = square) val morphPath = morph .toPath(progress = 0.5f).asComposePath() onDrawBehind { drawPath(morphPath, color = Color.Black) } } .fillMaxSize() )
উপরের উদাহরণে, প্রগ্রেস ঠিক দুটি শেপের মাঝামাঝি (গোলাকার ত্রিভুজ ও একটি বর্গক্ষেত্র), যার ফলে নিম্নলিখিত ফলাফল পাওয়া গেছে:
বেশিরভাগ ক্ষেত্রে, মরফিং অ্যানিমেশনের অংশ হিসেবে করা হয় এবং এটি শুধু স্ট্যাটিক রেন্ডারিং নয়। এই দুটির মধ্যে অ্যানিমেট করতে, আপনি স্ট্যান্ডার্ড Compose-এ অ্যানিমেশন API ব্যবহার করে সময়ের সাথে প্রগ্রেস ভ্যালু পরিবর্তন করতে পারেন। যেমন, আপনি নিম্নলিখিত উপায়ে এই দুটি শেপের মধ্যে অসীমভাবে মরফ অ্যানিমেট করতে পারবেন:
val infiniteAnimation = rememberInfiniteTransition(label = "infinite animation") val morphProgress = infiniteAnimation.animateFloat( initialValue = 0f, targetValue = 1f, animationSpec = infiniteRepeatable( tween(500), repeatMode = RepeatMode.Reverse ), label = "morph" ) Box( modifier = Modifier .drawWithCache { val triangle = RoundedPolygon( numVertices = 3, radius = size.minDimension / 2f, centerX = size.width / 2f, centerY = size.height / 2f, rounding = CornerRounding( size.minDimension / 10f, smoothing = 0.1f ) ) val square = RoundedPolygon( numVertices = 4, radius = size.minDimension / 2f, centerX = size.width / 2f, centerY = size.height / 2f ) val morph = Morph(start = triangle, end = square) val morphPath = morph .toPath(progress = morphProgress.value) .asComposePath() onDrawBehind { drawPath(morphPath, color = Color.Black) } } .fillMaxSize() )
ক্লিপ হিসেবে বহুভুজ ব্যবহার করা
কীভাবে কোনও কম্পোজ করার মতো আইটেম রেন্ডার করা হয় তা পরিবর্তন করতে এবং ক্লিপিং এরিয়ার চারপাশে ড্র করা
ছায়ার সুবিধা নিতে, কম্পোজে
clip
মডিফায়ার ব্যবহার করা সাধারণ ব্যাপার:
fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) } class RoundedPolygonShape( private val polygon: RoundedPolygon, private var matrix: Matrix = Matrix() ) : Shape { private var path = Path() override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { path.rewind() path = polygon.toPath().asComposePath() matrix.reset() val bounds = polygon.getBounds() val maxDimension = max(bounds.width, bounds.height) matrix.scale(size.width / maxDimension, size.height / maxDimension) matrix.translate(-bounds.left, -bounds.top) path.transform(matrix) return Outline.Generic(path) } }
তারপরে, আপনি নিম্নলিখিত স্নিপেটে দেখানো ক্লিপ হিসেবে বহুভুজ ব্যবহার করতে পারবেন:
val hexagon = remember { RoundedPolygon( 6, rounding = CornerRounding(0.2f) ) } val clip = remember(hexagon) { RoundedPolygonShape(polygon = hexagon) } Box( modifier = Modifier .clip(clip) .background(MaterialTheme.colorScheme.secondary) .size(200.dp) ) { Text( "Hello Compose", color = MaterialTheme.colorScheme.onSecondary, modifier = Modifier.align(Alignment.Center) ) }
এর ফলে নিম্নলিখিত বিষয়গুলি হয়:
আগে যা রেন্ডার করা হত তার থেকে এটি খুব আলাদা নাও লাগতে পারে, তবে এটি কম্পোজে অন্যান্য ফিচার ব্যবহার করার সুবিধা দেয়। যেমন, এই টেকনিকটি কোনও ছবি ক্লিপ করতে এবং ক্লিপ করা অঞ্চলের চারপাশে একটি শেডো প্রয়োগ করতে ব্যবহার করা যেতে পারে:
val hexagon = remember { RoundedPolygon( 6, rounding = CornerRounding(0.2f) ) } val clip = remember(hexagon) { RoundedPolygonShape(polygon = hexagon) } Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Image( painter = painterResource(id = R.drawable.dog), contentDescription = "Dog", contentScale = ContentScale.Crop, modifier = Modifier .graphicsLayer { this.shadowElevation = 6.dp.toPx() this.shape = clip this.clip = true this.ambientShadowColor = Color.Black this.spotShadowColor = Color.Black } .size(200.dp) ) }
ক্লিক করার পরে 'মর্ফ' বোতাম
আপনি graphics-shape লাইব্রেরি ব্যবহার করে এমন একটি বোতাম তৈরি করতে পারেন যা প্রেস করলে
দুটি শেপের মধ্যে মরফ হয়। প্রথমে, MorphPolygonShape তৈরি করুন যা Shape-এর এক্সটেনশন,
এটি উপযুক্তভাবে ফিট করার জন্য স্কেলিং এবং ট্রান্সলেট করা। শেপ যাতে অ্যানিমেট করা যায়, তার জন্য
প্রগ্রেসের পাস-ইন নোট করুন:
class MorphPolygonShape( private val morph: Morph, private val percentage: Float ) : Shape { private val matrix = Matrix() override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y. matrix.scale(size.width / 2f, size.height / 2f) matrix.translate(1f, 1f) val path = morph.toPath(progress = percentage).asComposePath() path.transform(matrix) return Outline.Generic(path) } }
এই মরফ শেপ ব্যবহার করতে, দুটি বহুভুজ, shapeA এবং shapeB তৈরি করুন। Morph তৈরি ও
মনে রাখুন। তারপর, ক্লিপ আউটলাইন হিসেবে বোতামে মর্ফ প্রয়োগ করুন,
interactionSource অন প্রেস ব্যবহার করে অ্যানিমেশনের
পেছনের ড্রাইভিং ফোর্স হিসেবে:
val shapeA = remember { RoundedPolygon( 6, rounding = CornerRounding(0.2f) ) } val shapeB = remember { RoundedPolygon.star( 6, rounding = CornerRounding(0.1f) ) } val morph = remember { Morph(shapeA, shapeB) } val interactionSource = remember { MutableInteractionSource() } val isPressed by interactionSource.collectIsPressedAsState() val animatedProgress = animateFloatAsState( targetValue = if (isPressed) 1f else 0f, label = "progress", animationSpec = spring(dampingRatio = 0.4f, stiffness = Spring.StiffnessMedium) ) Box( modifier = Modifier .size(200.dp) .padding(8.dp) .clip(MorphPolygonShape(morph, animatedProgress.value)) .background(Color(0xFF80DEEA)) .size(200.dp) .clickable(interactionSource = interactionSource, indication = null) { } ) { Text("Hello", modifier = Modifier.align(Alignment.Center)) }
বক্সে ট্যাপ করলে নিম্নলিখিত অ্যানিমেশন দেখা যায়:
আকৃতির মরফিংকে অসীমভাবে অ্যানিমেট করা
মর্ফ শেপকে অবিরাম অ্যানিমেট করতে, rememberInfiniteTransition ব্যবহার করুন।
নিচে এমন একটি প্রোফাইল ছবির উদাহরণ দেওয়া হল যেটি সময়ের সাথে সাথে
অসংখ্যবার আকার পরিবর্তন করে (এবং রোটেট করে)। এই পদ্ধতিতে উপরে দেখানো
MorphPolygonShape-এ সামান্য পরিবর্তন করা হয়:
class CustomRotatingMorphShape( private val morph: Morph, private val percentage: Float, private val rotation: Float ) : Shape { private val matrix = Matrix() override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y. matrix.scale(size.width / 2f, size.height / 2f) matrix.translate(1f, 1f) matrix.rotateZ(rotation) val path = morph.toPath(progress = percentage).asComposePath() path.transform(matrix) return Outline.Generic(path) } } @Preview @Composable private fun RotatingScallopedProfilePic() { val shapeA = remember { RoundedPolygon( 12, rounding = CornerRounding(0.2f) ) } val shapeB = remember { RoundedPolygon.star( 12, rounding = CornerRounding(0.2f) ) } val morph = remember { Morph(shapeA, shapeB) } val infiniteTransition = rememberInfiniteTransition("infinite outline movement") val animatedProgress = infiniteTransition.animateFloat( initialValue = 0f, targetValue = 1f, animationSpec = infiniteRepeatable( tween(2000, easing = LinearEasing), repeatMode = RepeatMode.Reverse ), label = "animatedMorphProgress" ) val animatedRotation = infiniteTransition.animateFloat( initialValue = 0f, targetValue = 360f, animationSpec = infiniteRepeatable( tween(6000, easing = LinearEasing), repeatMode = RepeatMode.Reverse ), label = "animatedMorphProgress" ) Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Image( painter = painterResource(id = R.drawable.dog), contentDescription = "Dog", contentScale = ContentScale.Crop, modifier = Modifier .clip( CustomRotatingMorphShape( morph, animatedProgress.value, animatedRotation.value ) ) .size(200.dp) ) } }
এই কোডটি নিম্নলিখিত মজাদার ফলাফল দেয়:
কাস্টম বহুভুজ
সাধারণ বহুভুজ থেকে তৈরি শেপ আপনার ব্যবহারের ক্ষেত্রে কভার না করলে, আপনি শীর্ষবিন্দুর তালিকা সহ আরও কাস্টম শেপ তৈরি করতে পারেন। যেমন, আপনি হয়ত এই ধরনের হার্ট শেপ তৈরি করতে চান:
আপনি RoundedPolygon
ওভারলোড ব্যবহার করে এই শেপের স্বতন্ত্র ভার্টেক্স নির্দিষ্ট করতে পারবেন, যা x, y কোঅর্ডিনেটের একটি ফ্লোট অ্যারে নেয়।
হার্ট পলিগনকে ভেঙে দেখাতে, লক্ষ্য করুন যে পয়েন্ট নির্দিষ্ট করার জন্য
পোলার কোঅর্ডিনেট সিস্টেম,কার্টেসিয়ান (x, y) কোঅর্ডিনেট
সিস্টেমের চেয়ে এটিকে সহজ করে তোলে, যেখানে 0° ডান দিক থেকে শুরু হয় এবং ক্লকওয়াইজ এগিয়ে চলে, সাথে
270° ১২টা পজিশনে থাকে:
এখন কোণ (𝜭) এবং প্রতিটি পয়েন্টে কেন্দ্র থেকে ব্যাসার্ধ নির্দিষ্ট করে আকারকে আরও সহজভাবে সংজ্ঞায়িত করা যেতে পারে:
ভার্টেক্স এখন তৈরি করা যাবে এবং RoundedPolygon ফাংশনে পাস করা যাবে:
val vertices = remember { val radius = 1f val radiusSides = 0.8f val innerRadius = .1f floatArrayOf( radialToCartesian(radiusSides, 0f.toRadians()).x, radialToCartesian(radiusSides, 0f.toRadians()).y, radialToCartesian(radius, 90f.toRadians()).x, radialToCartesian(radius, 90f.toRadians()).y, radialToCartesian(radiusSides, 180f.toRadians()).x, radialToCartesian(radiusSides, 180f.toRadians()).y, radialToCartesian(radius, 250f.toRadians()).x, radialToCartesian(radius, 250f.toRadians()).y, radialToCartesian(innerRadius, 270f.toRadians()).x, radialToCartesian(innerRadius, 270f.toRadians()).y, radialToCartesian(radius, 290f.toRadians()).x, radialToCartesian(radius, 290f.toRadians()).y, ) }
এই
radialToCartesian ফাংশন ব্যবহার করে শীর্ষবিন্দুগুলিকে কার্টেসিয়ান কোঅর্ডিনেটে ট্রান্সলেট করতে হবে:
internal fun Float.toRadians() = this * PI.toFloat() / 180f internal val PointZero = PointF(0f, 0f) internal fun radialToCartesian( radius: Float, angleRadians: Float, center: PointF = PointZero ) = directionVectorPointF(angleRadians) * radius + center internal fun directionVectorPointF(angleRadians: Float) = PointF(cos(angleRadians), sin(angleRadians))
আগের কোডটি আপনাকে হার্টের জন্য কাঁচা ভার্টেক্স দেয়, কিন্তু বেছে নেওয়া হার্টের আকার পেতে আপনাকে
নির্দিষ্ট কোণগুলি রাউন্ড করতে হবে। 90° ও
270° কোণগুলি রাউন্ড করা নেই, কিন্তু অন্যান্য কোণগুলি রাউন্ড করা আছে। আলাদা আলাদা কোণের জন্য কাস্টম রাউন্ডিং
অর্জন করতে, perVertexRounding প্যারামিটার ব্যবহার করুন:
val rounding = remember { val roundingNormal = 0.6f val roundingNone = 0f listOf( CornerRounding(roundingNormal), CornerRounding(roundingNone), CornerRounding(roundingNormal), CornerRounding(roundingNormal), CornerRounding(roundingNone), CornerRounding(roundingNormal), ) } val polygon = remember(vertices, rounding) { RoundedPolygon( vertices = vertices, perVertexRounding = rounding ) } Box( modifier = Modifier .drawWithCache { val roundedPolygonPath = polygon.toPath().asComposePath() onDrawBehind { scale(size.width * 0.5f, size.width * 0.5f) { translate(size.width * 0.5f, size.height * 0.5f) { drawPath(roundedPolygonPath, color = Color(0xFFF15087)) } } } } .size(400.dp) )
এর ফলে গোলাপি হার্ট পাওয়া যায়:
আগের শেপগুলি আপনার ব্যবহারের ক্ষেত্রে প্রযোজ্য না হলে, Path
কাস্টম শেপ আঁকতে
class ব্যবহার করার কথা বিবেচনা করুন অথবা ডিস্ক থেকে
ImageVector ফাইল
লোড করুন। graphics-shapes লাইব্রেরিটি কোনও অনির্দিষ্ট
আকৃতির জন্য ব্যবহার করার উদ্দেশ্যে তৈরি করা হয়নি, তবে এটি বিশেষভাবে গোলাকার বহুভুজ তৈরি করা এবং
সেগুলির মধ্যে মরফ অ্যানিমেশন তৈরি করার প্রসেসকে সহজ করার জন্য তৈরি করা হয়েছে।
অতিরিক্ত রিসোর্স
আরও তথ্য ও উদাহরণের জন্য, নিম্নলিখিত রিসোর্স দেখুন: