pixi-live2d-display-平面户型图编辑

常用JavaScript方法

下载此实例

开发语言：js
实例大小：8.32M
下载次数：10
浏览次数：63
发布时间：2023-03-30
实例类别：常用JavaScript方法
发布人：934440653
文件格式：.zip
所需积分：2

实例介绍

【实例简介】pixi-live2d-display-平面户型图编辑

【实例截图】

from clipboard

		import * as PIXI from "pixi.js";
	
		import AppInterface from './AppInterface';
	
		import AppAPI from "./AppAPI";
	
		import ActionAPI from "../action/ActionAPI";
	
		import OperationAPI from "../operation/OperationAPI";
	
		import EventAPI from "../event/EventAPI";
	
		import { StateManagerInterface } from '../state/StateInterface';
	
		import { ActionManagerInterface } from "../action/ActionInterface";
	
		import { GraphManagerInterface, setGraphCallback } from "../graph/GraphInterface";
	
		import { EventManagerInterface } from "../event/EventInterface";
	
		import GraphManager from '../graph/GraphManager';
	
		import OperationManager from '../operation/OperationManager';
	
		import EventManager from '../event/EventManager';
	
		import ActionManager from '../action/ActionManager';
	
		import StateManager from "../state/StateManager";
	
		import { Graph, GraphCache } from "../common/Graph";
	
		interface ActionCombine extends ActionAPI, ActionManagerInterface { }
	
		interface EventCombine extends EventAPI, EventManagerInterface { }
	
		export default class App implements AppInterface, AppAPI {
	
		    private _graph: Graph;
	
		    private _cache: GraphCache;
	
		    pixiApp: PIXI.Application;
	
		    actionManager: ActionCombine;
	
		    stateManager: StateManagerInterface;
	
		    graphManager: GraphManagerInterface;
	
		    operationManager: OperationAPI;
	
		    eventManager: EventCombine;
	
		    constructor(el: HTMLElement) {
	
		        this.pixiApp = this.init(el);
	
		        this.graphManager = new GraphManager(this);
	
		        this.operationManager = new OperationManager(this);
	
		        this.eventManager = new EventManager(this);
	
		        this.actionManager = new ActionManager(this);
	
		        this.stateManager = new StateManager(this);
	
		    }
	
		    private init(el: HTMLElement) {
	
		        const app = new PIXI.Application({
	
		            width: el.offsetWidth,
	
		            height: el.offsetHeight,
	
		            backgroundColor: 0xffffff,
	
		            antialias: true 
	
		        });
	
		        window.addEventListener("resize", function () {
	
		            app.renderer.resize(el.offsetWidth, el.offsetHeight);
	
		        });
	
		        el.appendChild(app.view);
	
		        return app;
	
		    }
	
		    public get graph(): Graph {
	
		        return this._graph;
	
		    }
	
		    public get cache(): GraphCache {
	
		        return this._cache;
	
		    }
	
		    setGraph(graph: Graph, cache: GraphCache, callBack?: setGraphCallback) {
	
		        this._graph = graph;
	
		        this._cache = cache;
	
		        this.actionManager.init(graph);
	
		        this.graphManager.setGraph(graph, cache, callBack);
	
		        this.eventManager.bindAllHandler();
	
		    }
	
		}

		import * as PIXI from "pixi.js";
	
		import { Shape, ShapeContent, Point, LineGraphics, PointGraphics, ShapeGraphics, LineStyle } from "../common/Graph";
	
		import { defultGraphStyle } from "./constant";
	
		export function drawShape(graphics: ShapeGraphics, shape: Shape, textScale: number, content: ShapeContent = defultGraphStyle) {
	
		    let hasMoveTo: boolean = false; //判断graph是否开始画：因为第一个点有可能被擦除 是null 
	
		    let moveToPoint: Point = [0, 0]; //记录第一个开始画的点 用于最后再画一次 
	
		    let xMin: number,
	
		        xMax: number,
	
		        yMin: number,
	
		        yMax: number;
	
		    graphics.removeChildren();
	
		    // set a fill and line style 
	
		    graphics.beginFill(content.backgroundColor, content.backgroundAlpha == undefined ? content.alpha : content.backgroundAlpha);
	
		    if (content.border.lineStyle === LineStyle.Solid) {
	
		        graphics.lineStyle(content.border.lineWidth, content.border.color, 1);
	
		    }
	
		    graphics.alpha = content.alpha; // 透明度 
	
		    graphics.interactive = content.interactive == undefined ? true : content.interactive; // 为定义则默认开启 
	
		    // draw a shape 
	
		    for (let i = 0; i < shape.length; i ) {
	
		        if (!shape[i]) {
	
		            continue;
	
		        }
	
		        if (!hasMoveTo) {
	
		            graphics.moveTo(shape[i][0], shape[i][1]);
	
		            moveToPoint = shape[i];
	
		            hasMoveTo = true;
	
		            xMin = moveToPoint[0];
	
		            xMax = moveToPoint[0];
	
		            yMin = moveToPoint[1];
	
		            yMax = moveToPoint[1];
	
		        } else {
	
		            graphics.lineTo(shape[i][0], shape[i][1]);
	
		        }
	
		        //查找shape的边界 
	
		        xMin = xMin > shape[i][0] ? shape[i][0] : xMin;
	
		        xMax = xMax < shape[i][0] ? shape[i][0] : xMax;
	
		        yMin = yMin > shape[i][1] ? shape[i][1] : yMin;
	
		        yMax = yMax < shape[i][1] ? shape[i][1] : yMax;
	
		    }
	
		    graphics.xMin = xMin;
	
		    graphics.xMax = xMax;
	
		    graphics.yMin = yMin;
	
		    graphics.yMax = yMax;
	
		    graphics.lineTo(moveToPoint[0], moveToPoint[1]);
	
		    graphics.endFill();
	
		    //画虚线 
	
		    if (content.border.lineStyle === LineStyle.Dashed) {
	
		        drawDashed(graphics, shape, content);
	
		    }
	
		    //文字 
	
		    if (content.content) {
	
		        drawText(graphics, content, textScale)
	
		    }
	
		    //角标 
	
		    if (content.hasMark) {
	
		        //根据右下角的点画一个三角形 
	
		        drawMark(graphics, content);
	
		    }
	
		    return graphics 
	
		}
	
		//shape：画虚线 
	
		function drawDashed(graphics: PIXI.Graphics, shape: Shape, content: ShapeContent) {
	
		    let dashLength: number = 5; // 虚线每段长度  
	
		    let borderAlpha: number = 1; // 虚线的透明度 
	
		    let excessLength: number = 0; // 亮点之间多余的虚线长度 
	
		    let hasMoveTo: boolean = false;
	
		    let moveToPoint: Point = [0, 0];
	
		    graphics.beginFill(content.backgroundColor, 0);
	
		    for (let i = 0; i <= shape.length; i ) {
	
		        // 排除删除的点和加一次循环 画成闭合曲线 
	
		        if (!shape[i] && (i < shape.length)) {
	
		            continue;
	
		        }
	
		        if (!hasMoveTo) {
	
		            graphics.moveTo(shape[i][0], shape[i][1]);
	
		            moveToPoint = shape[i];
	
		            hasMoveTo = true;
	
		            continue 
	
		        }
	
		        let point1 = shape[i - 1]; // 上一个点 
	
		        let point2 = shape[i];
	
		        if (i == shape.length) {
	
		            point1 = shape[i - 1];
	
		            point2 = moveToPoint;
	
		        }
	
		        // 两点之间的长度 
	
		        let line: number = Math.sqrt(Math.pow(point1[0] - point2[0], 2) Math.pow(point1[1] - point2[1], 2));
	
		        let mulriple: number = line / dashLength;
	
		        let drawLineto = (x: number, y: number) => {
	
		            borderAlpha = Math.abs(borderAlpha - 1);
	
		            graphics.lineTo(x, y);
	
		            graphics.lineStyle(content.border.lineWidth, content.border.color, borderAlpha);
	
		        }
	
		        if (mulriple > 1) {
	
		            let x: number = point1[0];
	
		            let y: number = point1[1];
	
		            if (excessLength) {
	
		                let addLine = dashLength - excessLength; // 需要补的长度 
	
		                let addMul = line / addLine;
	
		                x = point1[0]   (point2[0] - point1[0]) / addMul;
	
		                y = point1[1]   (point2[1] - point1[1]) / addMul;
	
		                drawLineto(x, y);
	
		                line = line - addLine;
	
		            }
	
		            for (let j = line / dashLength; j >= 1; j--) {
	
		                x = (point2[0] - point1[0]) / mulriple;
	
		                y = (point2[1] - point1[1]) / mulriple;
	
		                drawLineto(x, y);
	
		            }
	
		            if (x !== point2[0]) {
	
		                graphics.lineTo(point2[0], point2[1]);
	
		                excessLength = line % dashLength;
	
		            }
	
		        } else {
	
		            //  excessLength  = line; 
	
		            if (excessLength line > dashLength) {
	
		                let addLine = dashLength - excessLength; // 需要补的长度 
	
		                let addMul = line / addLine;
	
		                let x: number = point1[0]   (point2[0] - point1[0]) / addMul;
	
		                let y: number = point1[1]   (point2[1] - point1[1]) / addMul;
	
		                drawLineto(x, y);
	
		                excessLength = excessLength line - dashLength;
	
		                if (x !== point2[0]) {
	
		                    graphics.lineTo(point2[0], point2[1]);
	
		                }
	
		            } else {
	
		                excessLength = line;
	
		                graphics.lineTo(point2[0], point2[1]);
	
		            }
	
		        }
	
		    }
	
		    graphics.endFill();
	
		}
	
		//shape：文字 
	
		function drawText(graphics: ShapeGraphics, content: ShapeContent, textScale: number) {
	
		    let maskGraph = graphics.clone();
	
		    let textStyle = new PIXI.TextStyle({
	
		        fontSize: content.font.fontSize,
	
		        fill: content.font.fill, //填充颜色 
	
		        wordWrap: true,
	
		        wordWrapWidth: graphics.xMax - graphics.xMin,
	
		        breakWords: true 
	
		    });
	
		    let text = new PIXI.Text(content.content, textStyle);
	
		    text.name = "text";
	
		    text.position.x = (graphics.xMin graphics.xMax) / 2 - text.width / 2;
	
		    text.position.y = (graphics.yMin graphics.yMax) / 2 - text.height / 2;
	
		    graphics.addChild(maskGraph)
	
		    // 文字超出后隐藏 
	
		    text.mask = maskGraph;
	
		    let newScale = 1 / textScale 
	
		    text.scale.x = newScale;
	
		    text.scale.y = newScale;
	
		    text.position.x = text.width * (textScale - 1) / 2;
	
		    text.position.y = text.height * (textScale - 1) / 2;
	
		    graphics.addChild(text);
	
		}
	
		//shape：角标 
	
		function drawMark(graphics: ShapeGraphics, content: ShapeContent) {
	
		    graphics.beginFill(content.backgroundColor, 1);
	
		    graphics.lineStyle();
	
		    graphics.moveTo(graphics.xMax - 20, graphics.yMax);
	
		    graphics.lineTo(graphics.xMax, graphics.yMax);
	
		    graphics.lineTo(graphics.xMax, graphics.yMax - 20);
	
		    graphics.lineTo(graphics.xMax - 20, graphics.yMax);
	
		    graphics.endFill();
	
		}
	
		//line 
	
		export function buildLine(line: LineGraphics, start: Point, end: Point) {
	
		    const color = line.isHighlight ? 0x7ed321 : 0xa7acb2;
	
		    const radius = 2;
	
		    line.lineStyle(1, color, 1);
	
		    line.beginFill(color, 1)
	
		    let radians = Math.atan2(end[1] - start[1], end[0] - start[0]);
	
		    let dx = Math.sin(radians) * radius;
	
		    let dy = Math.cos(radians) * radius;
	
		    let poly = new PIXI.Polygon(
	
		        new PIXI.Point(start[0] dx, start[1] - dy),
	
		        new PIXI.Point(end[0] dx, end[1] - dy),
	
		        new PIXI.Point(end[0] - dx, end[1] dy),
	
		        new PIXI.Point(start[0] - dx, start[1] dy),
	
		    );
	
		    line.drawPolygon(poly);
	
		    line.hitArea = poly;
	
		    line.endFill();
	
		    line.startPoint = start;
	
		    line.endPoint = end;
	
		}
	
		//point 
	
		export function buildPoint(graphics: PointGraphics, point: Point) {
	
		    const color = graphics.isHighlight ? 0x548f14 : 0xa7acb2;
	
		    graphics.beginFill(color, 1)
	
		    graphics.drawCircle(0, 0, 3);
	
		    graphics.x = point[0];
	
		    graphics.y = point[1];
	
		    graphics.endFill();
	
		    graphics.point = point;
	
		}

【核心代码】

.
├── pixi-live2d-display-master
│ ├── DOC_INDEX.md
│ ├── LICENSE
│ ├── README.md
│ ├── README.zh.md
│ ├── core
│ │ ├── README.md
│ │ └── live2d.d.ts
│ ├── cubism
│ ├── package.json
│ ├── playground
│ │ ├── index.html
│ │ └── index.ts
│ ├── scripts
│ │ ├── build-tests.js
│ │ ├── build.js
│ │ ├── gen-docs.js
│ │ ├── gen-spec.js
│ │ ├── motion-stt.js
│ │ ├── patch-dts-generator.js
│ │ ├── patch-types.js
│ │ └── setup.js
│ ├── src
│ │ ├── InteractionMixin.ts
│ │ ├── Live2DModel.ts
│ │ ├── Live2DTransform.ts
│ │ ├── common.ts
│ │ ├── config.ts
│ │ ├── csm2.ts
│ │ ├── csm4.ts
│ │ ├── cubism-common
│ │ │ ├── ExpressionManager.ts
│ │ │ ├── FocusController.ts
│ │ │ ├── InternalModel.ts
│ │ │ ├── ModelSettings.ts
│ │ │ ├── MotionManager.ts
│ │ │ ├── MotionState.ts
│ │ │ ├── SoundManager.ts
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── cubism2
│ │ │ ├── Cubism2ExpressionManager.ts
│ │ │ ├── Cubism2InternalModel.ts
│ │ │ ├── Cubism2ModelSettings.ts
│ │ │ ├── Cubism2MotionManager.ts
│ │ │ ├── Live2DExpression.ts
│ │ │ ├── Live2DEyeBlink.ts
│ │ │ ├── Live2DPhysics.ts
│ │ │ ├── Live2DPose.ts
│ │ │ ├── check-runtime.ts
│ │ │ ├── factory.ts
│ │ │ ├── index.ts
│ │ │ └── patch-motion.ts
│ │ ├── cubism4
│ │ │ ├── Cubism4ExpressionManager.ts
│ │ │ ├── Cubism4InternalModel.ts
│ │ │ ├── Cubism4ModelSettings.ts
│ │ │ ├── Cubism4MotionManager.ts
│ │ │ ├── check-runtime.ts
│ │ │ ├── factory.ts
│ │ │ ├── index.ts
│ │ │ └── setup.ts
│ │ ├── extra.ts
│ │ ├── factory
│ │ │ ├── FileLoader.ts
│ │ │ ├── Live2DFactory.ts
│ │ │ ├── Live2DLoader.ts
│ │ │ ├── XHRLoader.ts
│ │ │ ├── ZipLoader.ts
│ │ │ ├── index.ts
│ │ │ ├── model-middlewares.ts
│ │ │ └── texture.ts
│ │ ├── index.ts
│ │ ├── tools
│ │ │ └── HitAreaFrames.ts
│ │ ├── types
│ │ │ ├── Cubism2Spec.d.ts
│ │ │ ├── env.d.ts
│ │ │ ├── events.d.ts
│ │ │ └── helpers.d.ts
│ │ └── utils
│ │ ├── array.ts
│ │ ├── index.ts
│ │ ├── log.ts
│ │ ├── math.ts
│ │ ├── middleware.ts
│ │ ├── obj.ts
│ │ └── string.ts
│ ├── test
│ │ ├── assets
│ │ │ ├── circle.png
│ │ │ ├── haru
│ │ │ │ ├── expressions
│ │ │ │ │ ├── F01.exp3.json
│ │ │ │ │ ├── F02.exp3.json
│ │ │ │ │ ├── F03.exp3.json
│ │ │ │ │ ├── F04.exp3.json
│ │ │ │ │ ├── F05.exp3.json
│ │ │ │ │ ├── F06.exp3.json
│ │ │ │ │ ├── F07.exp3.json
│ │ │ │ │ └── F08.exp3.json
│ │ │ │ ├── haru_greeter_t03.2048
│ │ │ │ │ ├── texture_00.png
│ │ │ │ │ └── texture_01.png
│ │ │ │ ├── haru_greeter_t03.moc3
│ │ │ │ ├── haru_greeter_t03.model3.json
│ │ │ │ ├── haru_greeter_t03.physics3.json
│ │ │ │ ├── haru_greeter_t03.pose3.json
│ │ │ │ └── motion
│ │ │ │ ├── haru_g_idle.motion3.json
│ │ │ │ ├── haru_g_m05.motion3.json
│ │ │ │ ├── haru_g_m07.motion3.json
│ │ │ │ ├── haru_g_m14.motion3.json
│ │ │ │ └── haru_g_m15.motion3.json
│ │ │ └── shizuku
│ │ │ ├── expressions
│ │ │ │ ├── f01.exp.json
│ │ │ │ ├── f02.exp.json
│ │ │ │ ├── f03.exp.json
│ │ │ │ └── f04.exp.json
│ │ │ ├── motions
│ │ │ │ ├── flickHead_00.mtn
│ │ │ │ ├── flickHead_01.mtn
│ │ │ │ ├── flickHead_02.mtn
│ │ │ │ ├── idle_00.mtn
│ │ │ │ ├── idle_01.mtn
│ │ │ │ ├── idle_02.mtn
│ │ │ │ ├── pinchIn_00.mtn
│ │ │ │ ├── pinchIn_01.mtn
│ │ │ │ ├── pinchIn_02.mtn
│ │ │ │ ├── pinchOut_00.mtn
│ │ │ │ ├── pinchOut_01.mtn
│ │ │ │ ├── pinchOut_02.mtn
│ │ │ │ ├── shake_00.mtn
│ │ │ │ ├── shake_01.mtn
│ │ │ │ ├── shake_02.mtn
│ │ │ │ ├── tapBody_00.mtn
│ │ │ │ ├── tapBody_01.mtn
│ │ │ │ └── tapBody_02.mtn
│ │ │ ├── shizuku.1024
│ │ │ │ ├── texture_00.png
│ │ │ │ ├── texture_01.png
│ │ │ │ ├── texture_02.png
│ │ │ │ ├── texture_03.png
│ │ │ │ ├── texture_04.png
│ │ │ │ └── texture_05.png
│ │ │ ├── shizuku.moc
│ │ │ ├── shizuku.model.json
│ │ │ ├── shizuku.physics.json
│ │ │ ├── shizuku.pose.json
│ │ │ └── sounds
│ │ │ ├── flickHead_00.mp3
│ │ │ ├── flickHead_01.mp3
│ │ │ ├── flickHead_02.mp3
│ │ │ ├── pinchIn_00.mp3
│ │ │ ├── pinchIn_01.mp3
│ │ │ ├── pinchIn_02.mp3
│ │ │ ├── pinchOut_00.mp3
│ │ │ ├── pinchOut_01.mp3
│ │ │ ├── pinchOut_02.mp3
│ │ │ ├── shake_00.mp3
│ │ │ ├── shake_01.mp3
│ │ │ ├── shake_02.mp3
│ │ │ ├── tapBody_00.mp3
│ │ │ ├── tapBody_01.mp3
│ │ │ └── tapBody_02.mp3
│ │ ├── browser
│ │ │ ├── BrowserTest.js
│ │ │ └── index.js
│ │ ├── env.js
│ │ ├── index.js
│ │ ├── local.js
│ │ ├── module
│ │ │ ├── ExpressionManager.test.js
│ │ │ ├── FocusController.test.js
│ │ │ ├── InternalModel.test.js
│ │ │ ├── Live2DFactory.test.js
│ │ │ ├── Live2DModel.test.js
│ │ │ ├── ModelSettings.test.js
│ │ │ ├── MotionManager.test.js
│ │ │ ├── SoundManager.test.js
│ │ │ ├── compat.test.js
│ │ │ ├── index.js
│ │ │ ├── interaction.test.js
│ │ │ ├── loaders.test.js
│ │ │ └── utils.test.js
│ │ └── utils.js
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ ├── vite.config.ts
│ └── yarn.lock
└── 平面户型图编辑_pixi-live2d-display-master.zip

26 directories, 166 files

标签： 编辑

实例下载地址