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

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

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

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

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

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

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

{
  "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 เพื่อสร้างรูปร่างใหม่ในตำแหน่งที่ถูกต้องซึ่งสอดคล้องกับ รูปร่างลูกศรตัวอย่างในหน้าเว็บ ในทั้ง 2 กรณี ต้องคำนวณพิกัด 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 pt ซึ่งมีเส้นกึ่งกลางแนวนอนเดียวกันกับลูกศรตัวอย่าง แต่จะวางตำแหน่ง 100 pt (1,270,000 EMU) ทางด้านขวาของขอบด้านขวาของลูกศร พิกัด X ของวงกลมคือผลรวมของพิกัด X ของลูกศร ความกว้างของลูกศร และ 100 pt การบังคับใช้การจัดแนวเส้นกึ่งกลางสำหรับวงกลมใหม่ต้องคำนึงถึงความสูงของทั้งลูกศรและวงกลม พิกัด 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) คำขอที่ 2 ในกลุ่มจะย้ายลูกศรจากตำแหน่งนั้น โดยครั้งนี้จะย้ายไปทางขวา 40,000 EMU และขึ้นไป 35,000 EMU (โดยใช้การแปลแบบสัมพัทธ์ applyMode) เมทริกซ์การเปลี่ยนรูปแบบ 1 ที่ใช้ สร้างขึ้นเพื่อหลีกเลี่ยงการเปลี่ยนแปลงขนาดและการวางแนวขององค์ประกอบ

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

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

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"
        }
      }
    }
  ]
}