هندسهٔ Canvas 2D

سازندگان مسیر و حساب زاویه برای Canvas 2D. هر تابع مسیر تنها مسیر را می‌سازد؛ هرگز fill() یا stroke() را صدا نمی‌زند، پس فراخواننده تصمیم می‌گیرد چگونه رنگش کند.

کاربرد

import { roundRectByArc, getLinearGradient } from 'ranuts/utils';

const ctx = canvas.getContext('2d')!;

roundRectByArc(ctx, 10, 10, 200, 80, 12);
ctx.fillStyle = getLinearGradient(ctx, 10, 10, 200, 80, 'linear-gradient(90deg, #06f, #0cf)');
ctx.fill();

API

getAngle

درجه به رادیان.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
deg	زاویه بر حسب درجه	number	الزامی

بازگشت

آرگومان	توضیح	نوع
rad	زاویه بر حسب رادیان	number

getArcPointerByDeg

نقطه‌ای روی دایره که به آن زاویه مربوط است.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
deg	زاویه بر حسب رادیان	number	الزامی
r	شعاع	number	الزامی

بازگشت

آرگومان	توضیح	نوع
point	[x, y]	[number, number]

getTangentByPointer

خط مماس در نقطه‌ای روی دایره.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
x	مختصهٔ x	number	الزامی
y	مختصهٔ y	number	الزامی

بازگشت

آرگومان	توضیح	نوع
line	[شیب، عرض از مبدأ]	Array<number>

roundRectByArc

مستطیلی با گوشه‌های گرد می‌کشد. شعاع گوشه‌ای که از نصف ضلع کوتاه‌تر بزرگ‌تر باشد به همان نصف مهار می‌شود، پس گوشه‌های همسایه هرگز روی هم نمی‌افتند.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
ctx	بافتار دوبعدی Canvas	CanvasRenderingContext2D	الزامی
...rest	x, y, w, h, r	number[]	الزامی

بازگشت

بدون مقدار بازگشتی (void)

fanShapedByArc

یک قاچ دایره‌ای می‌کشد، همراه با شکافی که آن را از قاچ‌های دیگر جدا می‌کند.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
ctx	بافتار دوبعدی Canvas	CanvasRenderingContext2D	الزامی
maxRadius	شعاع بیرونی	number	الزامی
start	زاویهٔ آغاز بر حسب رادیان	number	الزامی
end	زاویهٔ پایان بر حسب رادیان	number	الزامی
gutter	پهنای شکاف میان قاچ‌ها	number	الزامی

بازگشت

بدون مقدار بازگشتی (void)

getLinearGradient

رشتهٔ linear-gradient(...) در CSS را به CanvasGradient در Canvas برمی‌گرداند.

createLinearGradient تنها یک نقطهٔ آغاز و یک نقطهٔ پایان می‌گیرد، حال آنکه CSS جهت را با زاویه بیان می‌کند. از این رو دایره به هشت قاچ ۴۵ درجه‌ای بخش می‌شود و مماس، آن زاویه را دوباره به مختصات آغاز و پایان روی مرز مستطیل برمی‌گرداند. جهت‌های کلیدواژه‌ای (to top و to bottom و to left و to right) مستقیم رسیدگی می‌شوند.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
ctx	بافتار دوبعدی Canvas	CanvasRenderingContext2D	الزامی
x	مقدار x در گوشهٔ بالا-چپ مستطیل	number	الزامی
y	مقدار y در گوشهٔ بالا-چپ مستطیل	number	الزامی
w	پهنای مستطیل	number	الزامی
h	بلندای مستطیل	number	الزامی
background	برای نمونه linear-gradient(90deg, red, blue)	string	الزامی

بازگشت

آرگومان	توضیح	نوع
gradient	مستقیم به fillStyle یا strokeStyle نسبت‌دادنی است	CanvasGradient

WARNING

ایستگاه‌های رنگ باید بی‌یکا باشند (red 0, blue 1). ایستگاهی به درصد (red 50%) به NaN تجزیه می‌شود و addColorStop خطا پرتاب می‌کند.