고급기능 JavaScript에서 셰이프를 사용하여 자동차 보험 청구서 앱을 만드는 방법
페이지 정보
작성자 GrapeCity 작성일 2021-08-24 08:49 조회 909회 댓글 0건본문
첨부파일
관련링크
클릭 가능한 섹션이 있는 JavaScript 자동차 보험 응용 프로그램
이 응용 프로그램으로 사용자는 보험사 홈페이지에 들어가 자동차 파손 부위를 클릭해 청구서를 작성할 수 있습니다. 이 샘플에는 클릭 가능한 상호 작용만 포함되지만, 데이터베이스에 정보를 저장하기 위한 "제출" 버튼, 다시 시작하기 위한 "지우기" 버튼 또는 로그인 페이지를 추가할 수 있습니다.
(zip)
1단계: 사용자 정의 셰이프 SpreadJS 프로젝트 설정
먼저 NPM을 사용하여 프로젝트 폴더를 설정하고 프로젝트에 SpreadJS 라이브러리 파일을 설치하는 것으로 시작하겠습니다.
npm install @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-shapes
그런 다음 이 프로젝트에 필요한 모든 SpreadJS 파일을 참조하고 사용할 일부 변수를 초기화할 수 있습니다.
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <title>Car Insurance Claim</title> <link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script> <script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script> <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript"> GC.Spread.Sheets.LicenseKey = "<YOUR KEY HERE>"; </script> </head> <body> <div class="sample"> <div id="spreadSheet" style="width: 100%; height: 100%; border: 1px solid gray"></div> </div> </body> </html>
JavaScript 코드는 별도의 파일에 있습니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 }); spread.options.allowUserZoom = false; var activeSheet = spread.getActiveSheet(); }
2단계: 다이어그램 png를 응용 프로그램에 추가
이제 다이어그램을 추가해 보겠습니다. 기본적으로 다이어그램 위에 셰이프를 만들어 보겠습니다. 그러면 디자인 팀에서 png를 만들 수 있습니다.
getCellRect 함수를 사용하여 다이어그램을 배치할 위치를 알아보겠습니다.
function addCarDiagram(sheet) { sheet.setColumnWidth(0, 200); sheet.setColumnWidth(10, 200); var startCellRect = sheet.getCellRect(0, 0), endCellRect = sheet.getCellRect(22, 10), spreadElement = document.getElementById("spreadSheet"); var offset = spreadElement.getBoundingClientRect() var x = offset.left - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader), y = offset.top - sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader); sheet.pictures.add("CarDiagram", "./Car Diagram.png", x, y, endCellRect.x - startCellRect.x, endCellRect.y - startCellRect.y); sheet.addSpan(1, 3, 1, 2); sheet.getCell(1, 3).text("Passenger Side"); sheet.getCell(1, 3).font("12pt Arial"); sheet.addSpan(20, 3, 1, 2); sheet.getCell(20, 3).text("Driver's Side"); sheet.getCell(20, 3).font("12pt Arial"); }
응용 프로그램에 다이어그램 추가
3단계: 다이어그램 맨 위에 셰이프 추가
이 프로젝트의 경우 다이어그램에 있는 모든 셰이프의 위치와 크기를 정의하는 별도의 시트를 만들 예정입니다. 영역을 작성한 다음 시트에서 해당 배열을 설정하면 쉽게 이 작업을 수행할 수 있습니다.
function initDamageAreaShapes(spread) { var sheet = spread.getSheet(0); spread.addSheet(1, new GC.Spread.Sheets.Worksheet("Damage_Areas")); var startColor = "lightgreen"; var damageAreaSheet = spread.getSheet(1); var damageAreas = ["Area", "Left", "Top", "Width", "Height", "Stroke Color", "Line Width"], front = ["front", 11, 136, 57, 167, "blue", 3], hood = ["hood", 123, 149, 142, 140, "blue", 3], frontWindshield = ["frontWindshield", 257, 149, 70, 140, "blue", 3], roof = ["roof", 325, 165, 158, 110, "blue", 3], rearTop = ["rearTop", 481, 149, 158, 143, "blue", 3], rear = ["rear", 661, 134, 63, 171, "blue", 3], leftFront = ["leftFront", 110, 310, 157, 85, "blue", 3], leftFrontDoor = ["leftFrontDoor", 257, 283, 140, 112, "blue", 3], leftBackDoor = ["leftBackDoor", 392, 283, 121, 111, "blue", 3], leftBack = ["leftBack", 465, 284, 168, 110, "blue", 3], rightFront = ["rightFront", 111, 44, 156, 76, "blue", 3], rightFrontDoor = ["rightFrontDoor", 258, 44, 139, 113, "blue", 3], rightBackDoor = ["rightBackDoor", 391, 44, 123, 115, "blue", 3], rightBack = ["rightBack", 465, 44, 168, 110, "blue", 3]; damageAreaSheet.setArray(0, 0, [ damageAreas, front, hood, frontWindshield, roof, rearTop, rear, leftFront, leftFrontDoor, leftBackDoor, leftBack, rightFront, rightFrontDoor, rightBackDoor, rightBack ]); }
정의된 후에는 각 셰이프에 대한 모델을 만들 수 있습니다.
시트에 위치와 크기가 정해져 있기 때문에 여러 셀을 참조할 수 있습니다. 또한 SVG 경로를 사용하여 셰이프를 정의할 수 있습니다.
SVG 경로는 셰이프의 왼쪽 상단 점에 대해 상대적입니다.
var frontModel = { left: "=Damage_Areas!B2", top: "=Damage_Areas!C2", width: "=Damage_Areas!D2", height: "=Damage_Areas!E2", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 1, 8], ["L", 17, 4], ["L", 19, 0], ["L", 31, 0], ["L", 33, 4], ["L", 51, 4], ["L", 56, 10], ["L", 57, 49], ["L", 52, 50], ["L", 51, 116], ["L", 57, 118], ["L", 57, 158], ["L", 51, 163], ["L", 34, 162], ["L", 31, 166], ["L", 19, 167], ["L", 18, 163], ["L", 1, 158], ["Z"] ] ] };
그런 다음 방금 정의한 모델을 사용하여 셰이프를 추가할 수 있습니다.
sheet.shapes.add('front', frontModel);
4단계: 사용자 정의 JavaScript 셰이프에 상호 작용 추가
이제 셰이프가 추가되었으므로 사용자가 셰이프를 선택할 때 셰이프 색상을 변경하기 위한 코드를 작성할 수 있습니다.
(function shapeClicked() { var host = spread.getHost(); host.addEventListener("click", function (e) { var offset = getOffset(host), left = offset.left, top = offset.top; var x = e.pageX - left, y = e.pageY - top; var hitTest = activeSheet.hitTest(x, y); if (hitTest.shapeHitInfo) { var shape = hitTest.shapeHitInfo.shape; var shapeStyle = shape.style(); shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)"); shape.style(shapeStyle); } }); })();
이 코드는 다음과 같이 정의된 getOffset이라는 사용자 정의 함수를 사용합니다.
function getOffset(elem) { var docElem, box = { top: 0, left: 0 }, doc = elem && elem.ownerDocument; if (!doc) { return; } docElem = doc.documentElement; if (typeof elem.getBoundingClientRect !== void 0) { box = elem.getBoundingClientRect(); } return { top: box.top + window.pageYOffset - docElem.clientTop, left: box.left + window.pageXOffset - docElem.clientLeft }; }
JavaScript 셰이프에 상호 작용 추가
5단계: 응용 프로그램에 버튼 셰이프 추가
사용자가 발생한 사고의 유형을 선택할 수 있도록 몇 가지 옵션을 추가할 수 있습니다. 버튼 셰이프를 만들어 셰이프 그룹에 추가합니다.
function initAccidentType(sheet) { var rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader), colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader), shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, hAlignment = GC.Spread.Sheets.HorizontalAlign.center, vAlignment = GC.Spread.Sheets.VerticalAlign.center, accidentTypeShapeInfo = [ [4, 11, "bumperDamage", "Bumper Damage"], [6, 11, "roofDamage", "Roof Damage"], [4, 15, "overheated", "Overheated"], [6, 15, "other", "Other"]], cellRect, margin = 5; sheet.addSpan(4, 10, 4, 1); var cell = sheet.getCell(4, 10); cell.text("Accident Type"); cell.hAlign(hAlignment); cell.vAlign(vAlignment); cell.font("20pt Arial"); var accidentTypeButtonsGroup = []; for (var s = 0; s < accidentTypeShapeInfo.length; s++) { var tempShapeInfo = accidentTypeShapeInfo[s]; sheet.addSpan(tempShapeInfo[0], tempShapeInfo[1], 2, 4); cellRect = getRangeOutsideWindow(sheet, tempShapeInfo[0], tempShapeInfo[1], 2, 4); var tempShape = sheet.shapes.add(tempShapeInfo[2], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin)); tempShape.text(tempShapeInfo[3]); var tempShapeStyle = tempShape.style(); tempShapeStyle.line.color = "darkgreen"; tempShapeStyle.fill.color = "lightgreen"; tempShapeStyle.fill.transparency = 0.5; tempShapeStyle.textFrame.hAlign = hAlignment; tempShapeStyle.textFrame.vAlign = vAlignment; tempShapeStyle.textEffect.color = 'black'; tempShape.style(tempShapeStyle); accidentTypeButtonsGroup.push(tempShape); } return accidentTypeButtonsGroup; }
버튼을 추가하여 사고의 심각성을 선택할 수도 있습니다. 해당되는 코드는 대부분 동일합니다.
function initSeverity(sheet) { var rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader), colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader), shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, hAlignment = GC.Spread.Sheets.HorizontalAlign.center, vAlignment = GC.Spread.Sheets.VerticalAlign.center, severityShapeInfo = [ [8, "highSeverity", "High"], [10, "mediumSeverity", "Medium"], [12, "lowSeverity", "Low"]], cellRect, margin = 5; sheet.addSpan(8, 10, 6, 1); var cell = sheet.getCell(8, 10); cell.text("Severity"); cell.hAlign(hAlignment); cell.vAlign(vAlignment); cell.font("20pt Arial"); var severityButtonsGroup = []; for (var s = 0; s < severityShapeInfo.length; s++) { var tempShapeInfo = severityShapeInfo[s]; sheet.addSpan(tempShapeInfo[0], 11, 2, 2); cellRect = getRangeOutsideWindow(sheet, tempShapeInfo[0], 11, 2, 2); var tempShape = sheet.shapes.add(tempShapeInfo[1], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin)); tempShape.text(tempShapeInfo[2]); var tempShapeStyle = tempShape.style(); tempShapeStyle.line.color = "darkgreen"; tempShapeStyle.fill.color = "lightgreen"; tempShapeStyle.fill.transparency = 0.5; tempShapeStyle.textFrame.hAlign = hAlignment; tempShapeStyle.textFrame.vAlign = vAlignment; tempShapeStyle.textEffect.color = 'black'; tempShape.style(tempShapeStyle); severityButtonsGroup.push(tempShape); } return severityButtonsGroup; }
JavaScript 셰이프에 상호 작용 추가
셰이프에 몇 가지 함수를 추가하여 선택한 차량 부위에 따른 사고 유형을 선택할 수 있습니다. 이 작업을 수행하기 위해 앞에서 정의한 shapeClicked 함수에 추가할 수 있습니다.
if (hitTest.shapeHitInfo) { var shape = hitTest.shapeHitInfo.shape; var shapeStyle = shape.style(); shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)"); shape.style(shapeStyle); //Roof Damage if (shape.name() == "roof") { var button = accidentTypeButtonsGroup.find("roofDamage"); var buttonStyle = button.style(); buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)"); button.style(buttonStyle); } else if (shape.name() == "roofDamage") { var button = activeSheet.shapes.get("roof"); var buttonStyle = button.style(); buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)"); button.style(buttonStyle); } //Bumper Damage else if (shape.name() == "front" || shape.name() == "rear") { var front = activeSheet.shapes.get("front"), rear = activeSheet.shapes.get("rear"); var button = accidentTypeButtonsGroup.find("bumperDamage"); if (front.style().fill.color === "rgb(255,0,0)" || rear.style().fill.color === "rgb(255,0,0)") { buttonStyle = button.style(); buttonStyle.fill.color = "rgb(255,0,0)"; button.style(buttonStyle); } else if (front.style().fill.color === "rgb(144,238,144)" && rear.style().fill.color === "rgb(144,238,144)") { buttonStyle = button.style(); buttonStyle.fill.color = "rgb(144,238,144)"; button.style(buttonStyle); } } else if (shape.name() == 'bumperDamage') { var front = activeSheet.shapes.get("front"), rear = activeSheet.shapes.get("rear"); var frontStyle = front.style(), rearStyle = rear.style(); var button = find(accidentTypeButtonsGroup, 'bumperDamage'); if (button.style().fill.color === "rgb(255,0,0)") { frontStyle.fill.color = "rgb(255,0,0)"; rearStyle.fill.color = "rgb(255,0,0)"; front.style(frontStyle); rear.style(rearStyle); } else { frontStyle.fill.color = "rgb(144,238,144)"; rearStyle.fill.color = "rgb(144,238,144)"; front.style(frontStyle); rear.style(rearStyle); } } //Severity else if (shape.name() === "highSeverity" || shape.name() === "mediumSeverity" || shape.name() === "lowSeverity") { for (var s = 0; s < buttonArray.length; s++) { if (severityButtonsGroup[s].name() !== shape.name()) { var buttonStyle = severityButtonsGroup[s].style(); buttonStyle.fill.color = "rgb(144,238,144)" severityButtonsGroup[s].style(buttonStyle); } } } else if (shape.name() === 'other') { var otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack']; var button = find(accidentTypeButtonsGroup, 'other'); for (var i = 0; i < otherShapes.length; i++) { const shapeName = otherShapes[i]; var curShape = activeSheet.shapes.get(shapeName); var curShapeStyle = curShape.style(); curShapeStyle.fill.color = button.style().fill.color; curShape.style(curShapeStyle); } } else if (shape.name() === 'hood' || shape.name() === 'leftFront' || shape.name() === 'rightFront') { var overheatedShapes = ['hood', 'leftFront', 'rightFront']; var allGreen = true; var button = find(accidentTypeButtonsGroup, 'overheated'); for (var i = 0; i < overheatedShapes.length; i++) { const shapeName = overheatedShapes[i]; var curShape = activeSheet.shapes.get(shapeName); if (curShape.style().fill.color == "rgb(255,0,0)") { allGreen = false; } } if (allGreen) { var buttonStyle = button.style(); buttonStyle.fill.color = "rgb(144,238,144)"; button.style(buttonStyle); } else { var buttonStyle = button.style(); buttonStyle.fill.color = "rgb(255,0,0)"; button.style(buttonStyle); } } else if (shape.name() === 'overheated') { var overheatedShapes = ['hood', 'leftFront', 'rightFront']; var button = find(accidentTypeButtonsGroup, 'overheated'); for (var i = 0; i < overheatedShapes.length; i++) { const shapeName = overheatedShapes[i]; var curShape = activeSheet.shapes.get(shapeName); var curShapeStyle = curShape.style(); curShapeStyle.fill.color = button.style().fill.color; curShape.style(curShapeStyle); } } else { var otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack']; var allGreen = true; var button = find(accidentTypeButtonsGroup, 'other'); for (var i = 0; i < otherShapes.length; i++) { const shapeName = otherShapes[i]; var curShape = activeSheet.shapes.get(shapeName); if (curShape.style().fill.color == "rgb(255,0,0)") { allGreen = false; } } if (allGreen) { var buttonStyle = button.style(); buttonStyle.fill.color = "rgb(144,238,144)"; button.style(buttonStyle); } else { var buttonStyle = button.style(); buttonStyle.fill.color = "rgb(255,0,0)"; button.style(buttonStyle); } } }
다른 셰이프에 종속된 셰이프 동작 추가
6단계: 양식 필드 셰이프 추가
클레임을 작성하려면 사용자가 정보를 입력할 수 있는 공간이 필요합니다. 그래야만 다음에 대한 정보 섹션을 만들 수 있습니다.
function initInfoArea(sheet) { var border = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin); sheet.addSpan(8, 13, 1, 3); sheet.getCell(8, 13).text("Driver Name:"); sheet.addSpan(8, 16, 1, 3); sheet.getRange(8, 16, 1, 3).borderBottom(border); sheet.addSpan(9, 13, 1, 3); sheet.getCell(9, 13).text("Vehicle Make/Model/Year:"); sheet.addSpan(9, 16, 1, 3); sheet.getRange(9, 16, 1, 3).borderBottom(border); sheet.addSpan(10, 13, 1, 6); sheet.getCell(10, 13).text("Details:"); sheet.addSpan(11, 13, 3, 6); sheet.getRange(11, 13, 3, 6).setBorder(border, { all: true }); }
양식 필드 셰이프 추가
7단계: 스프레드시트 기능 제거
마지막으로 눈금선이나 헤더와 같이 사용자에게 필요하지 않은 스프레드시트 기능을 제거해 보겠습니다.
var workbookShapes = activeSheet.shapes.all(); for (var s = 0; s < workbookShapes.length; s++) { workbookShapes[s].allowMove(false); workbookShapes[s].allowResize(false); } activeSheet.setRowCount(35); activeSheet.setColumnCount(20); activeSheet.name("Car Insurance Claim"); activeSheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false }; activeSheet.options.colHeaderVisible = false; activeSheet.options.rowHeaderVisible = false; spread.options.allowUserDragDrop = false; lockCells(activeSheet);
사용자 정의 셰이프 자동차 보험 응용 프로그램 작업
여기까지가 사용자 정의 셰이프로 간단한 응용 프로그램을 만드는 데 필요한 것입니다. 물론 이는 한 가지 예에 불과합니다. SpreadJS에서 사용자 정의 셰이프의 가능성은 무궁무진합니다!
(zip)
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.