ปรับแต่งรูปร่างการนำเสนอใน JavaScript
ภาพรวม
บทความนี้อธิบายวิธีปรับแต่งรูปร่างการนำเสนอใน Aspose.Slides โดยการแก้ไขเรขาคณิตของรูปร่างผ่านจุดแก้ไข (edit points) และเส้นทางเรขาคณิต (geometry paths) แสดงวิธีทำงานกับ GeometryPath เพื่อแก้ไขรูปร่างที่มีอยู่ ทำการแก้ไขเส้นทางพื้นฐาน เพิ่มหรือเอาจุดออก และนำเรขาคณิตที่อัปเดตกลับไปใช้กับรูปร่าง
นอกจากนี้ยังสาธิตวิธีสร้างรูปร่างแบบกำหนดเองและแบบรวมกัน สร้างรูปร่างที่มุมโค้ง ตรวจสอบว่ารูปร่างเป็นแบบปิดหรือไม่ และแปลงระหว่าง GeometryPath กับ java.awt.Shape สำหรับกรณีการปรับแต่งเรขาคณิตเพิ่มเติม
เปลี่ยนรูปร่างด้วยจุดแก้ไข
ให้พิจารณาสี่เหลี่ยมจัตุรัส ใน PowerPoint หากใช้ edit points คุณสามารถ
- ย้ายมุมของสี่เหลี่ยมเข้าออก
- กำหนดความโค้งของมุมหรือจุด
- เพิ่มจุดใหม่ลงในสี่เหลี่ยม
- จัดการกับจุดบนสี่เหลี่ยม ฯลฯ
โดยพื้นฐานแล้ว คุณสามารถทำสิ่งเหล่านี้กับรูปร่างใดก็ได้ การใช้จุดแก้ไขทำให้คุณสามารถเปลี่ยนรูปร่างหรือสร้างรูปร่างใหม่จากรูปร่างที่มีอยู่ได้
เคล็ดลับการแก้ไขรูปร่าง
ก่อนที่คุณจะเริ่มแก้ไขรูปร่าง PowerPoint ผ่านจุดแก้ไข ควรพิจารณาประเด็นต่อไปนี้เกี่ยวกับรูปร่าง
-
รูปร่าง (หรือเส้นทางของมัน) อาจเป็นแบบปิดหรือเปิด
-
เมื่อรูปร่างเป็นแบบปิด จะไม่มีจุดเริ่มต้นหรือจุดสิ้นสุด เมื่อเป็นแบบเปิด จะมีจุดเริ่มต้นและจุดสิ้นสุด
-
รูปร่างทั้งหมดประกอบด้วยจุดยึด (anchor point) อย่างน้อย 2 จุดที่เชื่อมต่อกันด้วยเส้น
-
เส้นอาจเป็นเส้นตรงหรือเส้นโค้ง จุดยึดกำหนดลักษณะของเส้น
-
จุดยึดมีอยู่ในรูปแบบมุม (corner point) จุดตรง (straight point) หรือจุดเรียบ (smooth point)
- มุม (corner point) คือจุดที่เส้นตรงสองเส้นมาบรรจบกันเป็นมุม
- จุดเรียบ (smooth point) คือจุดที่มีมือ (handle) สองอันอยู่บนเส้นตรงเดียวกันและส่วนของเส้นเชื่อมต่อกันเป็นโค้งเรียบ ในกรณีนี้ มือทั้งหมดจะอยู่ห่างจากจุดยึดเท่ากัน
- จุดตรง (straight point) คือจุดที่มีมือสองอันอยู่บนเส้นตรงเดียวกันและส่วนของเส้นเชื่อมต่อกันเป็นโค้งเรียบ ในกรณีนี้ มือไม่จำเป็นต้องอยู่ห่างจากจุดยึดเท่ากัน
-
การย้ายหรือแก้ไขจุดยึด (ซึ่งเปลี่ยนมุมของเส้น) สามารถเปลี่ยนลักษณะของรูปร่างได้
เพื่อแก้ไขรูปร่าง PowerPoint ผ่านจุดแก้ไข Aspose.Slides ให้บริการคลาส GeometryPath และคลาส GeometryPath
- อินสแตนซ์ของ GeometryPath แทนเส้นทางเรขาคณิตของอ็อบเจ็กต์ GeometryShape
- เพื่อดึง
GeometryPathจากอินสแตนซ์GeometryShapeให้ใช้เมธอด GeometryShape.getGeometryPaths - เพื่อกำหนด
GeometryPathให้กับรูปร่าง ให้ใช้เมธอดต่อไปนี้: GeometryShape.setGeometryPath สำหรับ รูปร่างแบบทึบ และ GeometryShape.setGeometryPaths สำหรับ รูปร่างแบบรวม - เพื่อเพิ่มส่วนเส้น ให้ใช้เมธอดใน GeometryPath
- ใช้เมธอด GeometryPath.setStroke และ GeometryPath.setFillMode เพื่อกำหนดลักษณะการแสดงผลของเส้นทางเรขาคณิต
- ด้วยเมธอด GeometryPath.getPathData คุณสามารถดึงข้อมูลเส้นทางของ
GeometryShapeเป็นอาเรย์ของส่วนเส้นได้ - เพื่อเข้าถึงตัวเลือกการปรับแต่งเรขาคณิตของรูปร่างเพิ่มเติม คุณสามารถแปลง GeometryPath เป็น java.awt.Shape
- ใช้เมธอด geometryPathToGraphicsPath และ graphicsPathToGeometryPath (จากคลาส ShapeUtil) เพื่อแปลง GeometryPath ไป-กลับกับ java.awt.Shape
การทำงานแก้ไขอย่างง่าย
โค้ด JavaScript นี้แสดงวิธี
เพิ่มเส้น ที่ท้ายเส้นทาง
lineTo(point);
lineTo(x, y);
เพิ่มเส้น ที่ตำแหน่งระบุบนเส้นทาง:
lineTo(point, index);
lineTo(x, y, index);
เพิ่มเส้นโค้งคืบเบียร์แบบพาราเมตริก ที่ท้ายเส้นทาง:
cubicBezierTo(point1, point2, point3);
cubicBezierTo(x1, y1, x2, y2, x3, y3);
เพิ่มเส้นโค้งคืบเบียร์แบบพาราเมตริก ที่ตำแหน่งระบุบนเส้นทาง:
cubicBezierTo(point1, point2, point3);
cubicBezierTo(x1, y1, x2, y2, x3, y3);
เพิ่มเส้นโค้งควอดราติก ที่ท้ายเส้นทาง:
quadraticBezierTo(point1, point2);
quadraticBezierTo(x1, y1, x2, y2);
เพิ่มเส้นโค้งควอดราติก ที่ตำแหน่งระบุบนเส้นทาง:
quadraticBezierTo(point1, point2, index);
quadraticBezierTo(x1, y1, x2, y2, index);
ต่อส่วนโค้ง (arc) ให้กับเส้นทาง:
arcTo(width, heigth, startAngle, sweepAngle);
ปิดรูปทรงปัจจุบัน ของเส้นทาง:
closeFigure();
กำหนดตำแหน่งของจุดต่อไป:
moveTo(point);
moveTo(x, y);
ลบส่วนเส้น ที่ดัชนีระบุ:
removeAt(index);
เพิ่มจุดกำหนดเองให้กับรูปร่าง
- สร้างอินสแตนซ์ของคลาส GeometryShape และกำหนดประเภทเป็น ShapeType.Rectangle
- รับอินสแตนซ์ของคลาส GeometryPath จากรูปร่าง
- เพิ่มจุดใหม่ระหว่างจุดบนสุดสองจุดบนเส้นทาง
- เพิ่มจุดใหม่ระหว่างจุดล่างสุดสองจุดบนเส้นทาง
- นำเส้นทางไปใช้กับรูปร่าง
โค้ด JavaScript นี้แสดงวิธีเพิ่มจุดกำหนดเองให้กับรูปร่าง:
var pres = new aspose.slides.Presentation();
try {
var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 200, 100);
var geometryPath = shape.getGeometryPaths()[0];
geometryPath.lineTo(100, 50, 1);
geometryPath.lineTo(100, 50, 4);
shape.setGeometryPath(geometryPath);
} finally {
if (pres != null) {
pres.dispose();
}
}
ลบจุดจากรูปร่าง
- สร้างอินสแตนซ์ของคลาส GeometryShape และกำหนดประเภทเป็น ShapeType.Heart
- รับอินสแตนซ์ของคลาส GeometryPath จากรูปร่าง
- ลบส่วนเส้นของเส้นทาง
- นำเส้นทางไปใช้กับรูปร่าง
โค้ด JavaScript นี้แสดงวิธีลบจุดจากรูปร่าง:
var pres = new aspose.slides.Presentation();
try {
var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Heart, 100, 100, 300, 300);
var path = shape.getGeometryPaths()[0];
path.removeAt(2);
shape.setGeometryPath(path);
} finally {
if (pres != null) {
pres.dispose();
}
}
สร้างรูปร่างกำหนดเอง
- คำนวณจุดสำหรับรูปร่าง
- สร้างอินสแตนซ์ของคลาส GeometryPath
- เติมเส้นทางด้วยจุดที่คำนวณได้
- สร้างอินสแตนซ์ของคลาส GeometryShape
- นำเส้นทางไปใช้กับรูปร่าง
โค้ด JavaScript นี้แสดงวิธีสร้างรูปร่างกำหนดเอง:
var points = java.newInstanceSync("java.util.ArrayList");
var R = 100;
var r = 50;
var step = 72;
for (var angle = -90; angle < 270; angle += step) {
var radians = angle * (java.getStaticFieldValue("java.lang.Math", "PI") / 180.0);
var x = R * java.callStaticMethodSync("java.lang.Math", "cos", radians);
var y = R * java.callStaticMethodSync("java.lang.Math", "sin", radians);
points.add(java.newInstanceSync("com.aspose.slides.Point2DFloat", java.newFloat(x + R), java.newFloat(y + R)));
radians = (java.getStaticFieldValue("java.lang.Math", "PI") * (angle + (step / 2))) / 180.0;
x = r * java.callStaticMethodSync("java.lang.Math", "cos", radians);
y = r * java.callStaticMethodSync("java.lang.Math", "sin", radians);
points.add(java.newInstanceSync("com.aspose.slides.Point2DFloat", java.newFloat(x + R), java.newFloat(y + R)));
}
var starPath = new aspose.slides.GeometryPath();
starPath.moveTo(points.get(0));
for (var i = 1; i < points.size(); i++) {
starPath.lineTo(points.get(i));
}
starPath.closeFigure();
var pres = new aspose.slides.Presentation();
try {
var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, R * 2, R * 2);
shape.setGeometryPath(starPath);
} finally {
if (pres != null) {
pres.dispose();
}
}
สร้างรูปร่างกำหนดเองแบบรวม
- สร้างอินสแตนซ์ของคลาส GeometryShape
- สร้างอินสแตนซ์แรกของคลาส GeometryPath
- สร้างอินสแตนซ์ที่สองของคลาส GeometryPath
- นำเส้นทางเหล่านั้นไปใช้กับรูปร่าง
โค้ด JavaScript นี้แสดงวิธีสร้างรูปร่างกำหนดเองแบบรวม:
var pres = new aspose.slides.Presentation();
try {
var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 200, 100);
var geometryPath0 = new aspose.slides.GeometryPath();
geometryPath0.moveTo(0, 0);
geometryPath0.lineTo(shape.getWidth(), 0);
geometryPath0.lineTo(shape.getWidth(), shape.getHeight() / 3);
geometryPath0.lineTo(0, shape.getHeight() / 3);
geometryPath0.closeFigure();
var geometryPath1 = new aspose.slides.GeometryPath();
geometryPath1.moveTo(0, (shape.getHeight() / 3) * 2);
geometryPath1.lineTo(shape.getWidth(), (shape.getHeight() / 3) * 2);
geometryPath1.lineTo(shape.getWidth(), shape.getHeight());
geometryPath1.lineTo(0, shape.getHeight());
geometryPath1.closeFigure();
shape.setGeometryPaths(java.newArray("com.aspose.slides.GeometryPath",[geometryPath0, geometryPath1]));
} finally {
if (pres != null) {
pres.dispose();
}
}
สร้างรูปร่างกำหนดเองที่มุมโค้ง
โค้ด JavaScript นี้แสดงวิธีสร้างรูปร่างกำหนดเองที่มุมโค้ง (โค้งเข้าด้านใน)
var shapeX = 20.0;
var shapeY = 20.0;
var shapeWidth = 300.0;
var shapeHeight = 200.0;
var leftTopSize = 50.0;
var rightTopSize = 20.0;
var rightBottomSize = 40.0;
var leftBottomSize = 10.0;
var pres = new aspose.slides.Presentation();
try {
var childShape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Custom, shapeX, shapeY, shapeWidth, shapeHeight);
var geometryPath = new aspose.slides.GeometryPath();
var point1 = java.newInstanceSync("com.aspose.slides.Point2DFloat", leftTopSize, 0);
var point2 = java.newInstanceSync("com.aspose.slides.Point2DFloat", shapeWidth - rightTopSize, 0);
var point3 = java.newInstanceSync("com.aspose.slides.Point2DFloat", shapeWidth, shapeHeight - rightBottomSize);
var point4 = java.newInstanceSync("com.aspose.slides.Point2DFloat", leftBottomSize, shapeHeight);
var point5 = java.newInstanceSync("com.aspose.slides.Point2DFloat", 0, leftTopSize);
geometryPath.moveTo(point1);
geometryPath.lineTo(point2);
geometryPath.arcTo(rightTopSize, rightTopSize, 180, -90);
geometryPath.lineTo(point3);
geometryPath.arcTo(rightBottomSize, rightBottomSize, -90, -90);
geometryPath.lineTo(point4);
geometryPath.arcTo(leftBottomSize, leftBottomSize, 0, -90);
geometryPath.lineTo(point5);
geometryPath.arcTo(leftTopSize, leftTopSize, 90, -90);
geometryPath.closeFigure();
childShape.setGeometryPath(geometryPath);
pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
if (pres != null) {
pres.dispose();
}
}
ตรวจสอบว่ารูปร่างเป็นแบบปิดหรือไม่
รูปร่างแบบปิดหมายถึงรูปที่ทุกด้านเชื่อมต่อกันเป็นเส้นขอบเดียวโดยไม่มีช่องว่าง รูปร่างนี้อาจเป็นรูปทรงเรขาคณิตพื้นฐานหรือโครงร่างกำหนดเองที่ซับซ้อน ตัวอย่างโค้ดต่อไปนี้แสดงการตรวจสอบว่ารูปร่างเป็นแบบปิดหรือไม่
function isGeometryClosed(geometryShape)
{
let isClosed = null;
geometryShape.getGeometryPaths().forEach(geometryPath => {
const pathData = geometryPath.getPathData();
const dataLength = pathData.length;
if (dataLength === 0) return;
const lastSegment = pathData[dataLength - 1];
isClosed = lastSegment.getPathCommand() === aspose.slides.PathCommandType.Close;
if (!isClosed) return false;
});
return isClosed === true;
}
แปลง GeometryPath ไปเป็น java.awt.Shape
- สร้างอินสแตนซ์ของคลาส GeometryShape
- สร้างอินสแตนซ์ของคลาส java.awt.Shape
- ใช้ ShapeUtil แปลงอินสแตนซ์ java.awt.Shape ไปเป็นอินสแตนซ์ GeometryPath
- นำเส้นทางไปใช้กับรูปร่าง
โค้ด JavaScript — การนำขั้นตอนข้างต้นไปใช้งาน — แสดงกระบวนการแปลง GeometryPath เป็น GraphicsPath
var pres = new aspose.slides.Presentation();
try {
// สร้างรูปร่างใหม่
var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 300, 100);
// รับเส้นทางเรขาคณิตของรูปร่าง
var originalPath = shape.getGeometryPaths()[0];
originalPath.setFillMode(aspose.slides.PathFillModeType.None);
// สร้างเส้นทางกราฟิกใหม่พร้อมข้อความ
var graphicsPath;
var font = java.newInstanceSync("java.awt.Font", "Arial", java.getStaticFieldValue("java.awt.Font", "PLAIN"), 40);
var text = "Text in shape";
var img = java.newInstanceSync("BufferedImage", 100, 100, java.getStaticFieldValue("BufferedImage", "TYPE_INT_ARGB"));
var g2 = img.createGraphics();
try {
var glyphVector = font.createGlyphVector(g2.getFontRenderContext(), text);
graphicsPath = glyphVector.getOutline(20.0, -glyphVector.getVisualBounds().getY() + 10);
} finally {
g2.dispose();
}
// แปลงเส้นทางกราฟิกเป็นเส้นทางเรขาคณิต
var textPath = aspose.slides.ShapeUtil.graphicsPathToGeometryPath(graphicsPath);
textPath.setFillMode(aspose.slides.PathFillModeType.Normal);
// ตั้งค่าการรวมของเส้นทางเรขาคณิตใหม่และเส้นทางเรขาคณิตเดิมให้กับรูปร่าง
shape.setGeometryPaths(java.newArray("com.aspose.slides.IGeometryPath", [originalPath, textPath]));
} finally {
if (pres != null) {
pres.dispose();
}
}
คำถามที่พบบ่อย
การแทนที่เรขาคณิตจะส่งผลต่อการเติมสีและโครงร่างอย่างไร?
สไตล์จะยังคงอยู่กับรูปร่าง เพียงแค่เส้นขอบเปลี่ยนไป การเติมสีและโครงร่างจะถูกนำไปใช้กับเรขาคณิตใหม่โดยอัตโนมัติ
ฉันจะหมุนรูปร่างกำหนดเองพร้อมกับเรขาคณิตอย่างถูกต้องได้อย่างไร?
ใช้เมธอด setRotation ของรูปร่าง เรขาคณิตจะหมุนพร้อมกับรูปร่างเนื่องจากถูกผูกกับระบบพิกัดของรูปร่างเอง
ฉันสามารถแปลงรูปร่างกำหนดเองเป็นภาพเพื่อ “ล็อก” ผลลัพธ์ได้หรือไม่?
ได้ — ให้ส่งออก สไลด์ หรือ รูปร่าง ที่ต้องการเป็นรูปแบบแรสเตอร์ วิธีนี้ทำให้การทำงานต่อกับเรขาคณิตที่ซับซ้อนง่ายขึ้น