ran
فارسی

هندسهٔ 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