|
|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import { Component, OnInit, ElementRef } from '@angular/core'; |
|
|
|
|
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; |
|
|
|
|
import * as PIXI from 'pixi.js'; |
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
|
@ -6,119 +6,164 @@ import * as PIXI from 'pixi.js';
|
|
|
|
|
templateUrl: './working-area.component.html', |
|
|
|
|
styleUrls: ['./working-area.component.scss'] |
|
|
|
|
}) |
|
|
|
|
export class WorkingAreaComponent implements OnInit { |
|
|
|
|
|
|
|
|
|
constructor(private element: ElementRef) { } |
|
|
|
|
export class WorkingAreaComponent implements OnInit, AfterViewInit { |
|
|
|
|
|
|
|
|
|
constructor() { } |
|
|
|
|
|
|
|
|
|
@ViewChild('content') |
|
|
|
|
content: ElementRef; |
|
|
|
|
|
|
|
|
|
// 画布程序
|
|
|
|
|
app = new PIXI.Application({ |
|
|
|
|
width: window.innerWidth, // default: 800
|
|
|
|
|
height: window.innerHeight, // default: 600
|
|
|
|
|
antialias: true, // default: false
|
|
|
|
|
transparent: false, // default: false
|
|
|
|
|
resolution: 1, // default: 1
|
|
|
|
|
backgroundColor: 0x1099bb |
|
|
|
|
}); |
|
|
|
|
app: PIXI.Application; |
|
|
|
|
// 加载器
|
|
|
|
|
loader = PIXI.Loader.shared; |
|
|
|
|
// 背景
|
|
|
|
|
background = new PIXI.Container(); |
|
|
|
|
// 根目录
|
|
|
|
|
backgroundImage = PIXI.Sprite.from('https://qntemp3.bejson.com/upload/84723844912904450.jpg?imageView2/0/w/0/h/0/format/webp'); |
|
|
|
|
// 影子
|
|
|
|
|
shadow = new PIXI.Sprite(); |
|
|
|
|
// 初始化
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
this.element.nativeElement.appendChild(this.app.view); |
|
|
|
|
this.app.stage.addChild(this.background); |
|
|
|
|
this.createBackgroundImage('assets/images/caiji.jpg'); |
|
|
|
|
this.app.ticker.add((delta) => { |
|
|
|
|
// Read mouse points, this could be done also in mousemove/touchmove update. For simplicity it is done here for now.
|
|
|
|
|
// When implementing this properly, make sure to implement touchmove as interaction plugins mouse might not update on certain devices.
|
|
|
|
|
const mouseposition = this.app.renderer.plugins.interaction.mouse.global; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 页面初始化之后
|
|
|
|
|
ngAfterViewInit(): void { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.createCanvas(); |
|
|
|
|
this.createBackgroundImage(); |
|
|
|
|
}, 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 测试按钮
|
|
|
|
|
testButton() { |
|
|
|
|
this.createSprite('assets/images/avatar.jpg'); |
|
|
|
|
this.setIcon(); |
|
|
|
|
} |
|
|
|
|
// 测试按钮
|
|
|
|
|
createBackgroundButton() { |
|
|
|
|
this.createBackgroundImage('https://qntemp3.bejson.com/upload/31268909923294476.jpg?imageView2/0/w/16/h/16/format/webp'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setIcon() { |
|
|
|
|
const defaultIcon = 'url(\'assets/images/avatar.jpg\'),auto'; |
|
|
|
|
this.app.renderer.plugins.interaction.cursorStyles.default = defaultIcon; |
|
|
|
|
} |
|
|
|
|
// 加载资源
|
|
|
|
|
LoadAsset(name: string, path: string) { |
|
|
|
|
this.loader.onProgress.add(() => { |
|
|
|
|
console.log(this.loader.progress); |
|
|
|
|
}); // called once per loaded/errored file
|
|
|
|
|
this.loader.onError.add(() => { }); // called once per errored file
|
|
|
|
|
this.loader.onLoad.add(() => { }); // called once per loaded file
|
|
|
|
|
this.loader.onComplete.add(() => { |
|
|
|
|
alert('aaaaaaaa'); |
|
|
|
|
}); // called once when the queued resources all load.
|
|
|
|
|
this.loader.add(name, path); |
|
|
|
|
} |
|
|
|
|
// 创建画布
|
|
|
|
|
createCanvas(): void { |
|
|
|
|
this.app = new PIXI.Application({ |
|
|
|
|
width: this.content.nativeElement.clientWidth, |
|
|
|
|
height: this.content.nativeElement.clientHeight, |
|
|
|
|
antialias: true, |
|
|
|
|
transparent: false, |
|
|
|
|
resolution: 1, |
|
|
|
|
backgroundColor: 0x1099bb |
|
|
|
|
}); |
|
|
|
|
this.content.nativeElement.appendChild(this.app.view); |
|
|
|
|
this.app.ticker.add((delta) => { |
|
|
|
|
const mouseposition = this.app.renderer.plugins.interaction.mouse.global; |
|
|
|
|
console.log(mouseposition); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setIcon() { |
|
|
|
|
const defaultIcon = 'url(\'assets/images/avatar.jpg\'),auto'; |
|
|
|
|
this.app.renderer.plugins.interaction.cursorStyles.default = defaultIcon; |
|
|
|
|
} |
|
|
|
|
// 加载资源
|
|
|
|
|
LoadAsset(name: string, path: string) { |
|
|
|
|
this.loader.onProgress.add(() => { |
|
|
|
|
console.log(this.loader.progress); |
|
|
|
|
}); // called once per loaded/errored file
|
|
|
|
|
this.loader.onError.add(() => { }); // called once per errored file
|
|
|
|
|
this.loader.onLoad.add(() => { }); // called once per loaded file
|
|
|
|
|
this.loader.onComplete.add(() => { |
|
|
|
|
alert('aaaaaaaa'); |
|
|
|
|
}); // called once when the queued resources all load.
|
|
|
|
|
this.loader.add(name, path); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
createSprite(source: string, width: number = 64, height: number = 64, alpha: number = 1): PIXI.Sprite { |
|
|
|
|
const sprite = PIXI.Sprite.from(source); |
|
|
|
|
sprite.width = width; |
|
|
|
|
sprite.height = height; |
|
|
|
|
sprite.x = 500, |
|
|
|
|
sprite.y = 500, |
|
|
|
|
sprite.alpha = alpha; |
|
|
|
|
sprite.anchor.set(0.5); |
|
|
|
|
sprite.interactive = true; |
|
|
|
|
sprite |
|
|
|
|
.on('pointerdown', this.onDragStart) |
|
|
|
|
.on('pointerup', this.onDragEnd) |
|
|
|
|
.on('pointerupoutside', this.onDragEnd) |
|
|
|
|
.on('pointermove', this.onDragMove); |
|
|
|
|
this.app.stage.addChild(sprite); |
|
|
|
|
return sprite; |
|
|
|
|
} |
|
|
|
|
// 拖动开始
|
|
|
|
|
onDragStart(event) { |
|
|
|
|
event.currentTarget.data = event.data; |
|
|
|
|
event.currentTarget.alpha = 0.5; |
|
|
|
|
event.currentTarget.dragging = true; |
|
|
|
|
} |
|
|
|
|
// 拖动结束
|
|
|
|
|
onDragEnd(event) { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
} |
|
|
|
|
// 拖动移动
|
|
|
|
|
onDragMove(event) { |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); |
|
|
|
|
event.currentTarget.x = newPosition.x; |
|
|
|
|
event.currentTarget.y = newPosition.y; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 加载精灵图
|
|
|
|
|
SetupSprite(name: string) { |
|
|
|
|
const sprite = new PIXI.Sprite( |
|
|
|
|
this.loader.resources[name].texture |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
// 画圆
|
|
|
|
|
DrawCircle(x: number, y: number): void { |
|
|
|
|
const circle = new PIXI.Graphics(); |
|
|
|
|
circle.beginFill(0x5cafe2); |
|
|
|
|
circle.drawCircle(0, 0, 80); |
|
|
|
|
circle.x = x; |
|
|
|
|
circle.y = y; |
|
|
|
|
this.app.stage.addChild(circle); |
|
|
|
|
} |
|
|
|
|
// 改变背景颜色
|
|
|
|
|
BackgroundChanged(backgroundColor: number): void { |
|
|
|
|
this.app.renderer.backgroundColor = backgroundColor; |
|
|
|
|
} |
|
|
|
|
// 创建背景图片
|
|
|
|
|
createBackgroundImage(source: string): PIXI.Sprite { |
|
|
|
|
return this.createSprite(source, 500, 500, 1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
createSprite(source: string, width: number = 64, height: number = 64, alpha: number = 1): PIXI.Sprite { |
|
|
|
|
const sprite = PIXI.Sprite.from(source); |
|
|
|
|
// sprite.width = width;
|
|
|
|
|
// sprite.height = height;
|
|
|
|
|
sprite.x = 500, |
|
|
|
|
sprite.y = 500, |
|
|
|
|
sprite.alpha = alpha; |
|
|
|
|
sprite.anchor.set(0.5); |
|
|
|
|
sprite.interactive = true; |
|
|
|
|
sprite |
|
|
|
|
.on('pointerdown', this.onDragStart) |
|
|
|
|
.on('pointerup', this.onDragEnd) |
|
|
|
|
.on('pointerupoutside', this.onDragEnd) |
|
|
|
|
.on('pointermove', this.onDragMove); |
|
|
|
|
this.app.stage.addChild(sprite); |
|
|
|
|
return sprite; |
|
|
|
|
} |
|
|
|
|
// 拖动开始
|
|
|
|
|
onDragStart(event) { |
|
|
|
|
event.currentTarget.data = event.data; |
|
|
|
|
event.currentTarget.alpha = 0.5; |
|
|
|
|
event.currentTarget.dragging = true; |
|
|
|
|
} |
|
|
|
|
// 拖动结束
|
|
|
|
|
onDragEnd(event) { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
} |
|
|
|
|
// 拖动移动
|
|
|
|
|
onDragMove(event) { |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); |
|
|
|
|
event.currentTarget.x = newPosition.x; |
|
|
|
|
event.currentTarget.y = newPosition.y; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 加载精灵图
|
|
|
|
|
SetupSprite(name: string) { |
|
|
|
|
const sprite = new PIXI.Sprite( |
|
|
|
|
this.loader.resources[name].texture |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
// 画圆
|
|
|
|
|
DrawCircle(x: number, y: number): void { |
|
|
|
|
const circle = new PIXI.Graphics(); |
|
|
|
|
circle.beginFill(0x5cafe2); |
|
|
|
|
circle.drawCircle(0, 0, 80); |
|
|
|
|
circle.x = x; |
|
|
|
|
circle.y = y; |
|
|
|
|
this.app.stage.addChild(circle); |
|
|
|
|
} |
|
|
|
|
// 替换背景图
|
|
|
|
|
BackgroundChanged(backgroundColor: number): void { |
|
|
|
|
this.app.renderer.backgroundColor = backgroundColor; |
|
|
|
|
} |
|
|
|
|
// 创建背景图片
|
|
|
|
|
createBackgroundImage(source: string): void { |
|
|
|
|
this.backgroundImage.anchor.set(0.5); |
|
|
|
|
this.backgroundImage.x = this.app.view.width / 2; |
|
|
|
|
this.backgroundImage.y = this.app.view.height / 2; |
|
|
|
|
this.backgroundImage.width = 100; |
|
|
|
|
this.backgroundImage.height = 100; |
|
|
|
|
this.backgroundImage.interactive = true; |
|
|
|
|
this.backgroundImage |
|
|
|
|
.on('pointerdown', this.onDragStart) |
|
|
|
|
.on('pointerup', this.onDragEnd) |
|
|
|
|
.on('pointerupoutside', this.onDragEnd) |
|
|
|
|
.on('pointermove', this.onDragMove); |
|
|
|
|
this.app.stage.addChild(this.backgroundImage); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// var drag = false;
|
|
|
|
|
// createDragAndDropFor(container)
|
|
|
|
|
|
|
|
|
|
// function createDragAndDropFor(target) {
|
|
|
|
|
// target.interactive = true;
|
|
|
|
|
// target.on("mousedown", function (e) {
|
|
|
|
|
// drag = target;
|
|
|
|
|
// })
|
|
|
|
|
// target.on("mouseup", function (e) {
|
|
|
|
|
// drag = false;
|
|
|
|
|
// })
|
|
|
|
|
// target.on("mousemove", function (e) {
|
|
|
|
|
// if (drag) {
|
|
|
|
|
// drag.position.x += e.data.originalEvent.movementX;
|
|
|
|
|
// drag.position.y += e.data.originalEvent.movementY;
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
|
