หน้านี้ได้รับการแปลโดย Cloud Translation API

การดําเนินการเปลี่ยนรูปแบบ

Google Slides API ช่วยให้คุณจัดการตำแหน่ง ขนาด และการวางแนวของ PageElement (กล่องข้อความ รูปภาพ ตาราง และรูปร่างพื้นฐาน) ในหน้าเว็บได้ ขณะเดียวกันก็ทำให้เส้นตรงอยู่เสมอ รวมถึงเก็บรักษาจุดและเส้นขนาน ซึ่งเราเรียกว่าการเปลี่ยนรูปแบบผู้สนใจ ตัวอย่างต่อไปนี้แสดงการดำเนินการเปลี่ยนรูปแบบองค์ประกอบหน้าเว็บทั่วไปโดยใช้เมธอด presentations.batchUpdate

ตัวอย่างต่อไปนี้ใช้ตัวแปรต่อไปนี้

PRESENTATION_ID - ระบุตำแหน่งที่คุณระบุรหัสงานนำเสนอ คุณสามารถดูค่าของรหัสนี้ได้จาก URL ของงานนำเสนอ
PAGE_ID - ระบุตำแหน่งที่คุณระบุรหัสออบเจ็กต์หน้าเว็บ คุณดึงค่าของข้อมูลนี้จาก URL หรือโดยใช้คำขออ่าน API ก็ได้
PAGE_ELEMENT_ID - ระบุตำแหน่งที่คุณระบุรหัสออบเจ็กต์องค์ประกอบของหน้าเว็บ คุณสามารถระบุรหัสนี้สำหรับองค์ประกอบที่คุณสร้าง (โดยมีข้อจำกัดบางอย่าง) หรืออนุญาตให้ Slides API สร้างรหัสโดยอัตโนมัติ คุณดึงรหัสองค์ประกอบได้ ผ่านคำขออ่าน API

ตัวอย่างเหล่านี้แสดงเป็นคำขอ HTTP เพื่อไม่ระบุภาษา หากต้องการดูวิธีใช้การอัปเดตเป็นกลุ่มในภาษาต่างๆ โดยใช้ไลบรารีของไคลเอ็นต์ Google API โปรดดูเพิ่มรูปร่างและข้อความ

ตัวอย่างรูปร่างลูกศร

สำหรับตัวอย่างด้านล่าง ให้สมมติว่ามีตัวอย่างเอลิเมนต์หน้าเว็บรูปร่างลูกศรที่มีขนาดดังต่อไปนี้และข้อมูลการเปลี่ยนรูปแบบ (ซึ่งพบได้ด้วยคำขอเมธอด presentations.pages.get) รูปร่างตัวอย่างใช้การวัด unit EMU (หน่วยเมตริกภาษาอังกฤษ) และ pt (point)

{
  "objectId": PAGE_ELEMENT_ID,
  "size": {
    "width": {
      "magnitude": 3000000,
      "unit": "EMU"
    },
    "height": {
      "magnitude": 3000000,
      "unit": "EMU"
    }
  },
  "transform": {
    "scaleX": 0.3,
    "scaleY": 0.12,
    "shearX": 0,
    "shearY": 0,
    "translateX": 2000000,
    "translateY":  550000,
    "unit": "EMU"
  },
  "shape": {
    "shapeType": "RIGHT_ARROW"
  }
}

จัดแนวองค์ประกอบให้สอดคล้องกับองค์ประกอบอื่น

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด CreateShapeRequest เพื่อสร้างรูปร่างใหม่ในตําแหน่งที่เหมาะสมซึ่งสอดคล้องกับรูปร่างลูกศรตัวอย่างในหน้า ในทั้งสองกรณี จะต้องคำนวณพิกัด X และ Y ของมุมซ้ายบนของรูปร่างใหม่

คำขอแรกจะสร้างสี่เหลี่ยมผืนผ้าขนาด 100 x 50 พิกเซลที่สอดคล้องกับขอบด้านซ้ายของรูปร่างลูกศร แต่อยู่ต่ำกว่าขอบด้านบนของลูกศร 50 พิกเซล (50 * 12,700 = 635,000 EMU) พิกัด X ของสี่เหลี่ยมผืนผ้าใหม่ควรเหมือนกับพิกัด X ของลูกศรเพื่อให้ขอบด้านซ้ายของสี่เหลี่ยมผืนผ้านั้นยังคงอยู่ในแนว พิกัด Y เป็นค่าเดียวกับพิกัด Y ของลูกศรที่บวก 50 pt เนื่องจากระยะทางวัดจากด้านบนของลูกศร พิกัดของสี่เหลี่ยมผืนผ้าจึงมีดังนี้

x" = 2000000 EMU
y" = 550000 + (50 * 12700) = 1185000 EMU

คําขอที่ 2 จะสร้างวงกลมกว้าง 40 พิกเซลที่มีเส้นกึ่งกลางแนวนอนเดียวกับลูกศรตัวอย่าง แต่อยู่ทางด้านขวาของขอบขวาของลูกศร 100 พิกเซล (1,270,000 EMU) พิกัด X ของวงกลมคือผลรวมของพิกัด X ของหัวลูกศร ความกว้างของหัวลูกศร และ 100 พิกเซล การบังคับให้จัดแนวตามเส้นกึ่งกลางสำหรับวงกลมใหม่ต้องคำนึงถึงความสูงของทั้งลูกศรและวงกลม พิกัด Y ของวงกลมคือพิกัด Y ของลูกศรบวกครึ่งความสูงของลูกศรลบครึ่งความสูงของวงกลม ในกรณีทั้ง 2 กรณี คุณต้องพิจารณาปัจจัยการปรับขนาดที่เชื่อมโยงกับลูกศรด้วย เนื่องจากปัจจัยเหล่านี้ส่งผลต่อความกว้างและความสูงที่แสดงผลของลูกศร พิกัดของวงกลมคือ

x = 2000000 + (0.3 * 3000000) + (100 * 12700) = 4170000 EMU
y = 550000 + (0.5 * 0.12 * 3000000) - (0.5 * 40 * 12700) = 476000 EMU

ต่อไปนี้เป็นโปรโตคอลคำขอในการจัดเรียงองค์ประกอบให้สอดคล้องกับรายการอื่น

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate

{
  "requests": [
    {
      "createShape": {
        "shapeType": "RECTANGLE",
        "elementProperties": {
          "pageObjectId": PAGE_ID,
          "size": {
            "width": {
              "magnitude": 100,
              "unit": "PT"
            },
            "height": {
              "magnitude": 50,
              "unit": "PT"
            }
          },
          "transform": {
            "scaleX": 1,
            "scaleY": 1,
            "translateX": 2000000,
            "translateY": 1185000,
            "unit": "EMU"
          }
        }
      }
    },
    {
      "createShape": {
        "shapeType": "ELLIPSE",
        "elementProperties": {
          "pageObjectId": PAGE_ID,
          "size": {
            "width": {
              "magnitude": 40,
              "unit": "PT"
            },
            "height": {
              "magnitude": 40,
              "unit": "PT"
            }
          },
          "transform": {
            "scaleX": 1,
            "scaleY": 1,
            "translateX": 4170000,
            "translateY":  476000,
            "unit": "EMU"
          }
        }
      }
    }
  ]
}

ย้ายองค์ประกอบ

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด UpdatePageElementTransformRequest เพื่อแปลองค์ประกอบหน้ารูปร่างลูกศรตัวอย่างใน 2 วิธีที่แตกต่างกัน

คำขอแรกในแบทช์ย้ายลูกศรไปยัง (X,Y) = (2000000, 150000) พิกัด EMU (โดยใช้การเปลี่ยนตำแหน่งแบบสัมบูรณ์ applyMode) คำขอที่สองในแบทช์ย้ายลูกศรจากจุดนั้น คราวนี้เท่ากับ 40,000 EMU ไปถึงองค์ประกอบขวาและ 35,000 แปลงหน่วย EMU ขึ้นด้านบน (โดยใช้การเปลี่ยนการวางแนวของapplyModeแบบสัมพัทธ์ applyMode)

หลังจากดำเนินการตามคำขอทั้ง 2 รายการแล้ว มุมซ้ายบนของรูปลูกศรจะอยู่ที่พิกัด EMU (X,Y) = (2040000, 115000)

ต่อไปนี้คือโปรโตคอลคำขอย้ายองค์ประกอบ

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate

{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "ABSOLUTE", "transform": { "scaleX": 0.3, "scaleY": 0.12, "translateX": 2000000, "translateY": 150000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 40000, "translateY": -35000, "unit": "EMU" } } } ] }

แสดงองค์ประกอบ

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด UpdatePageElementTransformRequest เพื่อแสดงองค์ประกอบหน้ารูปลูกศรตัวอย่างในแนวนอนตามจุดศูนย์กลาง โดยไม่เปลี่ยนแปลงตำแหน่งในหน้าเว็บหรือการปรับขนาด

ทำได้โดยใช้การเปลี่ยนรูปแบบการสะท้อนพื้นฐานในเฟรมอ้างอิงขององค์ประกอบ เพื่อความชัดเจน ระบบจะแสดงการเปลี่ยนเฟรมอ้างอิงและการเปลี่ยนเฟรมสะท้อนด้วยการเรียกใช้เมธอด UpdatePageElementTransformRequest แยกกัน 3 ครั้ง แต่การคำนวณผลคูณของเมทริกซ์การเปลี่ยนรูปแบบเหล่านี้ล่วงหน้าแล้วนำไปใช้กับคำขอเดียวจะมีประสิทธิภาพมากกว่า

สำหรับการเปลี่ยนรูปแบบการแปล ระบบจะย้ายจุดศูนย์กลางของรูปลูกศรไปยังต้นทางและจากต้นทาง ค่าพารามิเตอร์จะแสดงเป็นการคำนวณเพื่อความชัดเจน

ต่อไปนี้คือโปรโตคอลคำขอเพื่อแสดงองค์ประกอบ

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate

{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": -2000000 - 0.5 * 0.3 * 3000000, "translateY": -550000 - 0.5 * 0.12 * 3000000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": -1, "scaleY": 1, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 2000000 + 0.5 * 0.3 * 3000000, "translateY": 550000 + 0.5 * 0.12 * 3000000, "unit": "EMU" } } } ] }

ปรับขนาดองค์ประกอบ

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด UpdatePageElementTransformRequest เพื่อปรับขนาดองค์ประกอบหน้ารูปลูกศรตัวอย่างให้กว้างขึ้น 50% และมีความสูงเพียง 80% ของความสูงปัจจุบัน ขณะที่รักษาจุดศูนย์กลางของลูกศรให้อยู่ในตําแหน่งเดิมและคงการวางแนวไว้

ซึ่งทำได้โดยใช้การเปลี่ยนรูปแบบการขยายขนาดพื้นฐานในเฟรมอ้างอิงขององค์ประกอบ เพื่อความชัดเจน ระบบจะแสดงการเปลี่ยนเฟรมอ้างอิงและการปรับขนาดด้วยการเรียกใช้เมธอด UpdatePageElementTransformRequest แยกกัน 3 ครั้ง แต่วิธีการคำนวณผลคูณของเมทริกซ์การเปลี่ยนรูปแบบเหล่านี้ล่วงหน้าแล้วนำไปใช้กับคำขอเดียวจะมีประสิทธิภาพมากกว่า

สำหรับการเปลี่ยนรูปแบบคำแปล ระบบจะย้ายกึ่งกลางของรูปร่างลูกศรไปยังและจากต้นทาง ค่าพารามิเตอร์จะแสดงเป็นการคำนวณเพื่อความชัดเจน

ต่อไปนี้เป็นโปรโตคอลคำขอในการปรับขนาดองค์ประกอบ

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate

{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": -2000000 - 0.5 * 0.3 * 3000000, "translateY": -550000 - 0.5 * 0.12 * 3000000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1.5, "scaleY": 0.8, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 2000000 + 0.5 * 0.3 * 3000000, "translateY": 550000 + 0.5 * 0.12 * 3000000, "unit": "EMU" } } } ] }

หมุนองค์ประกอบให้ห่างจากจุดศูนย์กลาง

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้วิธี UpdatePageElementTransformRequest เพื่อหมุนองค์ประกอบหน้ารูปลูกศรตัวอย่าง 35 องศาทวนเข็มนาฬิกา โดยที่จุดศูนย์กลางของลูกศรอยู่ในตำแหน่งเดิมและคงขนาดไว้

ซึ่งทำได้โดยใช้การเปลี่ยนรูปแบบการหมุนพื้นฐานในเฟรมอ้างอิงขององค์ประกอบ เพื่อความชัดเจน ระบบจะแสดงการเปลี่ยนเฟรมอ้างอิงและการหมุนด้วยการเรียกใช้เมธอด UpdatePageElementTransformRequest แยกกัน 3 ครั้ง แต่วิธีการคำนวณผลคูณของเมทริกซ์การเปลี่ยนรูปแบบเหล่านี้ล่วงหน้าแล้วนำไปใช้กับคำขอเดียวจะมีประสิทธิภาพมากกว่า

สำหรับการเปลี่ยนรูปแบบการแปล ระบบจะย้ายจุดศูนย์กลางของรูปลูกศรไปยังต้นทางและจากต้นทาง ค่าพารามิเตอร์จะแสดงเป็นการคำนวณเพื่อความชัดเจน

ต่อไปนี้คือโปรโตคอลคำขอเพื่อหมุนองค์ประกอบรอบจุดศูนย์กลาง

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate

{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": -2000000 - 0.5 * 0.3 * 3000000, "translateY": -550000 - 0.5 * 0.12 * 3000000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": cos(35 * (pi/180)), "scaleY": cos(35 * (pi/180)), "shearX": sin(35 * (pi/180)), "shearY": -sin(35 * (pi/180)), "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 2000000 + 0.5 * 0.3 * 3000000, "translateY": 550000 + 0.5 * 0.12 * 3000000, "unit": "EMU" } } } ] }