shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善] 完善创建背景图

develop
徐振升 5 years ago
parent
986b8ed4cf
commit
029a524ef8
2 changed files with 184 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/app/working-area/working-area.component.html
  2. 252
      src/app/working-area/working-area.component.ts

14
src/app/working-area/working-area.component.html
Unescape View File

@ -1,4 +1,14 @@
<div #content style="width:100%;height:100%;position:absolute;">
<div #content style="width:100%;height:100%;" (mousewheel)='mouseWheelHandel($event)'>
<button
(click)="createBackgroundImage('https://qntemp3.bejson.com/upload/84723844912904450.jpg?imageView2/0/w/0/h/0/format/webp')">测试创建背景图</button>
(click)="this.replaceBackgroundImage('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/0/h/0/format/webp')">替换背景图</button>
<button
(click)="this.createSinglePointIcon('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/100/h/100/format/webp')">创建图标</button>
<button
(click)="this.replaceBackgroundImage('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/0/h/0/format/webp')">创建多边形</button>
<button
(click)="this.replaceBackgroundImage('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/0/h/0/format/webp')">创建多点连线</button>
<button
(click)="this.replaceBackgroundImage('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/0/h/0/format/webp')">取消创建</button>
<button (click)="this.setBackgroundImageVisible(false)">隐藏背景图</button>
<button (click)="this.setBackgroundImageVisible(true)">显示背景图</button>
</div>

252
src/app/working-area/working-area.component.ts
Unescape View File

@ -16,12 +16,16 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
// 画布程序
app: PIXI.Application;
// 加载器
// 加载器
loader = PIXI.Loader.shared;
// 根目录
backgroundImage = PIXI.Sprite.from('https://qntemp3.bejson.com/upload/84723844912904450.jpg?imageView2/0/w/0/h/0/format/webp');
backgroundImage: PIXI.Sprite;
// 影子
shadow = new PIXI.Sprite();
// 影子圆形
shadowCircle = new PIXI.Graphics();
// 鼠标位置
mousePosition;
// 初始化
ngOnInit(): void {
@ -29,16 +33,51 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
// 页面初始化之后
ngAfterViewInit(): void {
setTimeout(() => {
this.createCanvas();
this.createBackgroundImage();
this.init();
}, 0);
}
// 鼠标滑动事件
mouseWheelHandel(event) {
const delX = this.mousePosition.x - this.backgroundImage.position.x;
const delY = this.mousePosition.y - this.backgroundImage.position.y;
const scaleX = delX / this.backgroundImage.width;
const scaleY = delY / this.backgroundImage.height;
const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
if (delta > 0) {
if (this.backgroundImage.scale.x >= 32) {
this.backgroundImage.scale.x = 32;
return;
}
this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1;
this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1;
this.backgroundImage.anchor.x += scaleX;
this.backgroundImage.anchor.y += scaleY;
this.backgroundImage.position.x += delX;
this.backgroundImage.position.y += delY;
this.backgroundImage.children.forEach(item => {
});
} else if (delta < 0) {
if (this.backgroundImage.scale.x <= 0.1) {
this.backgroundImage.scale.y = 0.1;
return;
}
this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1;
this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1;
this.backgroundImage.anchor.x += scaleX;
this.backgroundImage.anchor.y += scaleY;
this.backgroundImage.position.x += delX;
this.backgroundImage.position.y += delY;
this.backgroundImage.children.forEach(item => {
});
}
}
// 测试按钮
createBackgroundButton() {
this.createBackgroundImage('https://qntemp3.bejson.com/upload/31268909923294476.jpg?imageView2/0/w/16/h/16/format/webp');
init() {
this.createCanvas();
this.createBackgroundImage('https://qntemp3.bejson.com/upload/24797865631586900.jpg?imageView2/0/w/0/h/0/format/webp');
this.createShadowIcon('https://qntemp3.bejson.com/upload/24797865631586900.jpg?imageView2/0/w/100/h/100/format/webp');
this.setShadowVisible(false);
}
// 创建画布
createCanvas(): void {
this.app = new PIXI.Application({
@ -51,66 +90,70 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
});
this.content.nativeElement.appendChild(this.app.view);
this.app.ticker.add((delta) => {
const mouseposition = this.app.renderer.plugins.interaction.mouse.global;
console.log(mouseposition);
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
this.shadow.position = this.mousePosition;
this.shadowCircle.position = this.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);
}
// 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 {
// 创建单点图标
createSprite(source: string, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
const sprite = PIXI.Sprite.from(source);
// sprite.width = width;
// sprite.height = height;
sprite.x = 500,
sprite.y = 500,
sprite.x = x;
sprite.y = y;
sprite.width = width;
sprite.height = height;
sprite.alpha = alpha;
sprite.anchor.set(0.5);
sprite.interactive = true;
sprite.buttonMode = true;
sprite
.on('pointerdown', this.onDragStart)
.on('pointerup', this.onDragEnd)
.on('pointerupoutside', this.onDragEnd)
.on('pointermove', this.onDragMove);
this.app.stage.addChild(sprite);
sprite.setParent(this.backgroundImage);
return sprite;
}
// 拖动开始
onDragStart(event) {
}
// 拖动开始
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;
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;
}
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) {
@ -119,51 +162,100 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
);
}
// 画圆
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);
DrawCircle(x: number): void {
this.shadowCircle.beginFill(0xFFCC5A);
this.shadowCircle.drawCircle(0, 0, x);
this.app.stage.addChild(this.shadowCircle);
}
// 替换背景图
BackgroundChanged(backgroundColor: number): void {
this.app.renderer.backgroundColor = backgroundColor;
}
// 创建背景图片
// 创建背景图
createBackgroundImage(source: string): void {
this.backgroundImage = PIXI.Sprite.from(source);
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);
.on('pointerdown', event => {
if (!event.currentTarget.dragging) {
event.currentTarget.data = event.data;
// this.oldGroup = this.parentGroup;
// this.parentGroup = dragGroup;
event.currentTarget.dragging = true;
// event.currentTarget.scale.x *= 1.1;
// event.currentTarget.scale.y *= 1.1;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.dragPoint.x -= event.currentTarget.x;
event.currentTarget.dragPoint.y -= event.currentTarget.y;
}
})
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.dragging = false;
// this.parentGroup = this.oldGroup;
// event.currentTarget.scale.x /= 1.1;
// event.currentTarget.scale.y /= 1.1;
event.currentTarget.data = null;
console.log('创建图片');
// tslint:disable-next-line: max-line-length
this.createSprite('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/100/h/100/format/webp', this.mousePosition.x, this.mousePosition.y, 64, 64, 1);
}
})
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.dragging = false;
// this.parentGroup = this.oldGroup;
// event.currentTarget.scale.x /= 1.1;
// event.currentTarget.scale.y /= 1.1;
event.currentTarget.data = null;
}
})
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
}
});
this.app.stage.addChild(this.backgroundImage);
}
addShadow(obj) {
const graphics = new PIXI.Graphics();
// Circle
graphics.lineStyle(0);
graphics.beginFill(0xDE3249, 1);
graphics.drawCircle(100, 250, 50);
graphics.endFill();
obj.addChild(graphics);
}
// 设置背景显示状态
setBackgroundImageVisible(value: boolean): void {
this.backgroundImage.visible = value;
}
// 替换背景图
replaceBackgroundImage(source: string): void {
this.backgroundImage.texture = PIXI.Texture.from(source);
}
// 创建影子图标
createShadowIcon(source: string): void {
this.shadow = PIXI.Sprite.from(source);
this.shadow.alpha = 0.5;
this.shadow.anchor.set(0.5);
this.app.stage.addChild(this.shadow);
}
// 设置影子图标显示状态
setShadowVisible(value: boolean): void {
this.shadow.visible = value;
}
// 替换影子图片
replaceShadow(source: string): void {
this.shadow.texture = PIXI.Texture.from(source);
}
// 创建单点图标
createSinglePointIcon(source: string): void {
this.DrawCircle(5);
// this.setShadowVisible(true);
// this.addShadow(this.shadow);
// this.replaceShadow(source);
}
}
// 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;
// }
// })
// }

Write Preview
Loading…
Cancel
Save