Aspose.Diagram for Java เป็น Java API ที่มีคุณลักษณะหลากหลายสำหรับการจัดการไดอะแกรม Visio โดยทางโปรแกรมโดยไม่ต้องใช้ Microsoft Visio API รองรับการทำงานกับรูปแบบ Visio ยอดนิยม ได้แก่ VSD, VSDX, VDX, VSDM, VSSM และ VSSX เมื่อเร็ว ๆ นี้ เราได้ใช้ประโยชน์จากความสามารถของ Aspose.Diagram for Java และทำให้สามารถใช้คุณลักษณะการทำงานอัตโนมัติของ MS Visio ในแอปพลิเคชัน Node.js ได้ คุณลักษณะเหล่านี้ช่วยให้คุณสร้าง จัดการ แปลง และประมวลผลไดอะแกรม MS Visio ภายในแอปพลิเคชัน Node.js ของคุณ

Aspose.Diagram for Node.js ผ่าน Java มีชุดคุณลักษณะที่สมบูรณ์เพื่อสร้างหรือจัดการไดอะแกรม Visio โดยอัตโนมัติ คุณสามารถสร้าง อ่าน ส่งออก พิมพ์ และป้องกันไดอะแกรมได้อย่างง่ายดายด้วยโค้ดไม่กี่บรรทัด ในบทความนี้ ฉันจะพูดถึงวิธีสร้างไดอะแกรม Visio ตั้งแต่เริ่มต้นภายในแอปพลิเคชัน Node.js บทความที่เหลือแบ่งออกเป็นส่วนต่อไปนี้

Node.js Visio API - การติดตั้ง

ใช้คำสั่งต่อไปนี้เพื่อติดตั้งแพ็คเกจ Aspose.Diagram ในแอปพลิเคชัน Node.js ของคุณ

npm install aspose.diagram --save

สร้าง MS Visio Diagram ใน Node.js

ฉันจะเริ่มต้นด้วยการสร้างไดอะแกรม Visio (VSDX) ที่ว่างเปล่าตั้งแต่เริ่มต้น ต่อไปนี้เป็นขั้นตอนในการดำเนินการนี้

  • สร้างวัตถุของคลาส Diagram
  • บันทึกไดอะแกรมเป็นไฟล์โดยใช้เมธอด Diagram.save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีสร้างไดอะแกรม Visio (VSDX) ในแอปพลิเคชัน Node.js

var aspose = aspose || {};
aspose.diagram = require("aspose.diagram");

var diagram = new aspose.diagram.Diagram();
diagram.save("output.vsdx", aspose.diagram.SaveFileFormat.VSDX);

เพิ่ม Master ลงใน Visio Diagram ใน Node.js

Visio Stencils ประกอบด้วยคอลเลกชันของรูปร่างหลักที่ใช้ในการเพิ่ม/คัดลอกรูปร่างในไดอะแกรม Visio คุณเพิ่มต้นแบบลงในไดอะแกรม Visio โดยใช้ไฟล์สเตนซิล VSS ต่อไปนี้เป็นขั้นตอนในการเพิ่มต้นแบบโดยใช้ Aspose.Diagram

  • สร้างไดอะแกรม Visio ใหม่โดยใช้คลาส ไดอะแกรม
  • เพิ่มต้นแบบไปยังไดอะแกรมโดยใช้เส้นทางของไฟล์ stencil และชื่อ/ID ของต้นแบบ
  • เพิ่มรูปร่างลงในไดอะแกรมโดยใช้ชื่อต้นแบบ
  • บันทึกไดอะแกรมโดยใช้เมธอด Diagram.save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีเพิ่มต้นแบบในไดอะแกรม Visio ใน Node.js

var aspose = aspose || {};
aspose.diagram = require("aspose.diagram");

var diagram = new aspose.diagram.Diagram();

// โหลดลายฉลุไปยังสตรีม
templateFileName = "NetApp-FAS-series.vss";

// เพิ่มต้นแบบด้วยเส้นทางไฟล์ลายฉลุและรหัสหลัก
masterName = "FAS80xx rear empty";
diagram.addMaster(templateFileName, 2);

// หรือเพิ่มต้นแบบด้วยเส้นทางไฟล์ลายฉลุและชื่อต้นแบบ
diagram.addMaster(templateFileName, masterName);

// หรือเพิ่มต้นแบบในไดอะแกรมจากซอร์สไดอะแกรม
src = new aspose.diagram.Diagram(templateFileName);
diagram.addMaster(src, masterName);

// เพิ่มรูปร่างด้วย PinX และ PinY ที่กำหนด
diagram.addShape(2.0, 2.0, masterName, 0);
diagram.addShape(6.0, 6.0, masterName, 0);

// เพิ่มรูปร่างด้วย PinX, PinY, ความกว้างและความสูงที่กำหนด
diagram.addShape(7.0, 3.0, 1.5, 1.5, masterName, 0);

diagram.save("output.vsdx", aspose.diagram.SaveFileFormat.VSDX);

แทรกหน้าในไดอะแกรม Visio ใน Node.js

ก่อนสร้างรูปร่าง คุณต้องมีอย่างน้อยหนึ่งหน้าในไดอะแกรม Visio แต่ละหน้าในไดอะแกรม Visio จะมีชื่อและรหัสซึ่งใช้เพื่อระบุหน้านั้นโดยเฉพาะ ต่อไปนี้เป็นขั้นตอนในการเพิ่มหน้าในไดอะแกรม Visio

  • สร้างอินสแตนซ์ของคลาส Diagram
  • คำนวณ ID หน้าสูงสุด
  • สร้างหน้าใหม่โดยใช้คลาส หน้า
  • ตั้งชื่อเพจและ ID โดยใช้วิธี Page.setName() และ Page.setID() ตามลำดับ
  • เพิ่มหน้าไปยังไดอะแกรมโดยใช้เมธอด Diagram.getPages().add()
  • บันทึกไดอะแกรม Visio โดยใช้วิธี Diagram.save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการแทรกหน้าลงในไดอะแกรม Visio ใน Node.js

var aspose = aspose || {};
aspose.diagram = require("aspose.diagram");

var diagram = new aspose.diagram.Diagram();
// มันคำนวณรหัสหน้าสูงสุด
 max = 0;
if (diagram.getPages().getCount() != 0)
    max = diagram.getPages().get(0).getID();

for ( i = 1; i < diagram.getPages().getCount(); i++)
{
    if (max < diagram.getPages().get(i).getID())
        max = diagram.getPages().get(i).getID();
}
        
// เริ่มต้นวัตถุหน้าใหม่
newPage = new aspose.diagram.Page();
// ชื่อชุด
newPage.setName("new page");
// กำหนดรหัสหน้า
newPage.setID(max + 1);

// หรือลองใช้ตัวสร้างเพจ
// หน้า newPage = หน้าใหม่ (MaxPageId + 1);

// เพิ่มหน้าเปล่าใหม่
diagram.getPages().add(newPage);
diagram.save("output.vsdx", aspose.diagram.SaveFileFormat.VSDX);

สร้างรูปร่างในไดอะแกรม Visio ใน Node.js

เมื่อคุณสร้างเพจในไดอะแกรมแล้ว คุณสามารถเพิ่มรูปร่างได้ ต่อไปนี้เป็นขั้นตอนในการสร้างและแทรกรูปร่างในไดอะแกรม

  • สร้างวัตถุของคลาส Diagram
  • เพิ่มต้นแบบไปยังไดอะแกรมโดยใช้เส้นทางของไฟล์สเตนซิล
  • เพิ่มรูปทรงสี่เหลี่ยมผืนผ้าโดยใช้เมธอด Diagram.addShape()
  • ตั้งค่าคุณสมบัติของรูปร่าง เช่น ID, ข้อความ, ตำแหน่ง, สีเติม ฯลฯ
  • บันทึกไดอะแกรมโดยใช้เมธอด Diagram.save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีเพิ่มรูปร่างให้กับไดอะแกรม Visio ใน Node.js

var aspose = aspose || {};
aspose.diagram = require("aspose.diagram");

var diagram = new aspose.diagram.Diagram("output.vsdx");

// รับหน้าตามชื่อ
page = diagram.getPages()[.getPage("Page-2")];

// เพิ่มต้นแบบด้วยเส้นทางไฟล์ลายฉลุและรหัสหลัก
masterName = "Rectangle";
// เพิ่มต้นแบบด้วยเส้นทางไฟล์ลายฉลุและชื่อต้นแบบ
diagram.addMaster("Basic Shapes.vss", masterName);
            
// การทำดัชนีหน้าเริ่มต้นจาก 0
PageIndex = 2;
width = 2, height = 2, pinX = 4.25, pinY = 4.5;
// เพิ่มรูปสี่เหลี่ยมผืนผ้าใหม่
rectangleId = diagram.addShape(pinX, pinY, width, height, masterName, PageIndex);
            
// ตั้งค่าคุณสมบัติรูปร่าง 
rectangle = page.getShapes().getShape(rectangleId);
rectangle.getXForm().getPinX().setValue(5);
rectangle.getXForm().getPinY().setValue(5);
rectangle.setType(TypeValue.SHAPE);
rectangle.getText().getValue().add(new Txt("Aspose Diagram"));
rectangle.setTextStyle(diagram.getStyleSheets().get(3));
rectangle.getLine().getLineColor().setValue("#ff0000");
rectangle.getLine().getLineWeight().setValue(0.03);
rectangle.getLine().getRounding().setValue(0.1);
rectangle.getFill().getFillBkgnd().setValue("#ff00ff");
rectangle.getFill().getFillForegnd().setValue("#ebf8df");

diagram.save("output.vsdx", aspose.diagram.SaveFileFormat.VSDX);

เพิ่มรูปร่างข้อความลงในไดอะแกรม Visio ใน Node.js

Aspose.Diagram ยังให้คุณเพิ่มข้อความลงในไดอะแกรม Visio ในกรณีนี้ ข้อความจะถูกเพิ่มเป็นรูปร่าง ต่อไปนี้เป็นขั้นตอนในการเพิ่มข้อความลงในไดอะแกรม Visio

  • สร้างไดอะแกรม Visio ใหม่โดยใช้คลาส ไดอะแกรม
  • เพิ่มรูปร่างข้อความลงในไดอะแกรมโดยใช้เมธอด Diagram.getPages().getPage(0).addText()
  • บันทึกไดอะแกรมโดยใช้เมธอด Diagram.save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีเพิ่มรูปร่างข้อความในไดอะแกรม Visio ใน Node.js

var aspose = aspose || {};
aspose.diagram = require("aspose.diagram");

var diagram = new aspose.diagram.Diagram();

// ตั้งค่าพารามิเตอร์
PinX = 1, PinY = 1, Width = 1, Height = 1;
text = "Test text";

// เพิ่มข้อความลงในหน้า Visio
diagram.getPages().getPage(0).addText(PinX, PinY, Width, Height, text);

diagram.save("output.vsdx", aspose.diagram.SaveFileFormat.VSDX);

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

  • สร้างไดอะแกรม Visio ใหม่
  • เลือกหน้าที่ต้องการจากไดอะแกรม
  • เลือก รูปร่าง ที่ต้องการจากหน้าที่เลือก
  • สร้างไฮเปอร์ลิงก์ใหม่โดยใช้คลาสไฮเปอร์ลิงก์และตั้งค่าคุณสมบัติ
  • เพิ่มไฮเปอร์ลิงก์ไปยังรูปร่างโดยใช้เมธอด Shape.getHyperlinks().add()
  • บันทึกไดอะแกรม

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีเพิ่มไฮเปอร์ลิงก์ไปยังไดอะแกรม Visio ใน Node.js

var aspose = aspose || {};
aspose.diagram = require("aspose.diagram");

var diagram = new aspose.diagram.Diagram();

page = diagram.getPages().getPage(0);
// รับรูปร่างตาม ID
shape = page.getShapes().getShape(2);

// เริ่มต้นวัตถุเชื่อมโยงหลายมิติ
hyperlink = new aspose.diagram.Hyperlink();
// ตั้งค่าที่อยู่
hyperlink.getAddress().setValue("http://www.google.com/");
// ตั้งค่าที่อยู่ย่อย
hyperlink.getSubAddress().setValue("Sub address here");
// ตั้งค่าคำอธิบาย
hyperlink.getDescription().setValue("Description here");
// ชื่อชุด
hyperlink.setName("MyHyperLink");

// เพิ่มไฮเปอร์ลิงก์ไปยังรูปร่าง
shape.getHyperlinks().add(hyperlink); 

diagram.save("output.vsdx", aspose.diagram.SaveFileFormat.VSDX);

บทสรุป

ในบทความนี้ คุณได้เรียนรู้วิธีสร้างไดอะแกรม/รูปวาด Visio ตั้งแต่เริ่มต้นในแอปพลิเคชัน Node.js บทช่วยสอนทีละขั้นตอนและตัวอย่างโค้ดแสดงวิธีเพิ่มต้นแบบ หน้า รูปร่าง ข้อความ และไฮเปอร์ลิงก์ในไดอะแกรม Visio ด้วยโค้ดสองสามบรรทัด คุณสามารถสำรวจเพิ่มเติมเกี่ยวกับ Visio API สำหรับ Node.js โดยใช้ เอกสารประกอบ

บทความที่เกี่ยวข้อง)