API 參考

Shape

繪製色塊、分隔線、重點標示或簡單幾何視覺。

presentation.tsx

<Shape id="accent" x={8} y={30} w={5} h={48} shape="rectangle" fill="#7C3AED" stroke="transparent" strokeWidth={0} radius={8} />

屬性參考

屬性值應保持字面且可序列化，才能由 Canvas、Inspector、驗證與匯出流程可靠處理。

API	屬性	型別／值	必要	說明
所有原生圖層共用 props	id	string	是	穩定且唯一的圖層識別字。每個可見的原生圖層都必須提供。
	x	number	是	相對於投影片畫布左側的位置百分比。
	y	number	是	相對於投影片畫布頂端的位置百分比。
	w	number	是	圖層寬度，單位為畫布百分比。
	h	number	是	圖層高度，單位為畫布百分比。
	groupId	string	—	在不加入 wrapper 元素的情況下，將原生子圖層編組。
	groupName	string	—	在 Workbench 顯示的群組名稱。
	sharedId	string	—	連接相鄰 Morph 投影片中的同型圖層；在同一張投影片內必須唯一。
	rotation	number	—	順時針旋轉角度。
	opacity	number	—	圖層不透明度，範圍為 0 到 1。
	motion	JSON string	—	版本化的宣告式動作序列 JSON 字串；仍須保留完整的靜態最終畫面。
	interaction	JSON string	—	版本化的點擊互動 JSON 字串，可用於投影片導覽或連結。
Shape	shape	rectangle \| circle \| triangle \| diamond \| star \| line \| arrow \| chevron \| hexagon \| parallelogram	是	要繪製的幾何形狀。
	fill	color string	—	內部填色。
	stroke	color string	—	外框或線條顏色。
	strokeWidth	number	—	外框或線條寬度。
	radius / borderRadius	number	—	圓角矩形的圓角半徑。
	corner	number	—	連續圓角處理。
	points / sides	number	—	星形尖角數或多邊形邊數。
	lineStyle	solid \| dashed \| dotted	—	線條樣式。
	arrowStart / arrowEnd	none \| arrow \| circle \| bar	—	線條端點裝飾。
	arrowStartSize / arrowEndSize	number	—	端點大小百分比。
	shapeImageSrc	string	—	選用；裁切在非線條 Shape 內的圖片。
	shapeImageAlt	string	—	Shape 內圖片的說明。
	shapeImageFit	cover \| contain \| fill \| scale-down	—	Shape 內圖片填滿幾何形狀的方式。
	shapeImageCropX / shapeImageCropY / shapeImageScaleX / shapeImageScaleY	number	—	Shape 內圖片的裁切與縮放控制值。
	mask	none \| alpha \| luma \| clip	—	Shape 遮罩模式。
	operation	none \| subtract \| intersect \| exclude	—	Shape 布林運算效果。

必要語法

使用 id、x、y、w、h 與 shape。官方 reference 使用 rectangle、circle、line、diamond 與 star。

常用樣式

fill、stroke、strokeWidth、radius、rotation 與 points 均使用固定值；相鄰 Morph 投影片裡相容、同型的 Shape 可使用穩定 sharedId 串接。