diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
index 46b71588..df4025d8 100644
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@@ -47,12 +47,12 @@ export function useCanvasConfigInitialize() {
       offsetTexts.forEach((obj) => {
         let text = `${!obj.originText ? '' : obj.originText}`
         if (!obj.onlyOffset) {
-          text = text + `-∠${getDegreeByChon(obj.pitch)}${angleUnit}`
+          text = text + `-∠${obj.roofAngle ?? getDegreeByChon(obj.pitch)}${angleUnit}`
         }
         obj.set({ text: text })
       })
       flowTexts.forEach((obj) => {
-        obj.set({ text: `${!obj.originText ? '' : obj.originText + '-'}∠${getDegreeByChon(obj.pitch)}${pitchText}` })
+        obj.set({ text: `${!obj.originText ? '' : obj.originText + '-'}∠${obj.roofAngle ?? getDegreeByChon(obj.pitch)}${pitchText}` })
       })
     }
 
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 2536b9f0..9b17419e 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -333,6 +333,7 @@ export const usePolygon = () => {
       moduleCompass: polygon.moduleCompass,
       visible: isFlowDisplay,
       pitch: polygon.roofMaterial?.pitch ?? 4,
+      roofAngle: polygon.roofMaterial?.angle,
       parentId: polygon.id,
     })
     arrow.setViewLengthText(false)
@@ -348,7 +349,7 @@ export const usePolygon = () => {
   const drawDirectionStringToArrow2 = (polygon, showDirectionText) => {
     let { direction, surfaceCompass, moduleCompass, arrow } = polygon
     if (moduleCompass === null || moduleCompass === undefined) {
-      const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, {
+      const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : (arrow.roofAngle ?? getDegreeByChon(arrow.pitch))}${pitchText}`, {
         fontFamily: flowFontOptions.fontFamily.value,
         fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
         fontStyle: flowFontOptions.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
@@ -357,6 +358,7 @@ export const usePolygon = () => {
         originX: 'center',
         originY: 'center',
         pitch: arrow.pitch,
+        roofAngle: arrow.roofAngle,
         name: 'flowText',
         selectable: false,
         left: arrow.stickeyPoint.x,
@@ -490,7 +492,7 @@ export const usePolygon = () => {
     text = text + (sameDirectionCnt.length + 1)
     polygon.set('directionText', text)
     const textObj = new fabric.Text(
-      `${showDirectionText && text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`,
+      `${showDirectionText && text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : (arrow.roofAngle ?? getDegreeByChon(arrow.pitch))}${pitchText})`,
       {
         fontFamily: flowFontOptions.fontFamily.value,
         fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
@@ -498,6 +500,7 @@ export const usePolygon = () => {
         fontSize: flowFontOptions.fontSize.value,
         fill: flowFontOptions.fontColor.value,
         pitch: arrow.pitch,
+        roofAngle: arrow.roofAngle,
         originX: 'center',
         originY: 'center',
         name: 'flowText',
@@ -707,7 +710,7 @@ export const usePolygon = () => {
   const addTextByArrows = (arrows, txt, canvas) => {
     arrows.forEach((arrow, index) => {
       // const textStr = `${txt}${index + 1} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`
-      const textStr = `${txt} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`
+      const textStr = `${txt} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : (arrow.roofAngle ?? getDegreeByChon(arrow.pitch))}${pitchText})`
 
       const text = new fabric.Text(`${textStr}`, {
         fontFamily: flowFontOptions.fontFamily.value,
@@ -716,6 +719,7 @@ export const usePolygon = () => {
         fontSize: flowFontOptions.fontSize.value,
         fill: flowFontOptions.fontColor.value,
         pitch: arrow.pitch,
+        roofAngle: arrow.roofAngle,
         originX: 'center',
         originY: 'center',
         name: 'flowText',