Merge branch 'develop' of http://39.106.78.171:3000/shaojiahao/AX.Angular9DataCollection into develop

src/app/working-area/working-area.component.html

@@ -0,0 +1,4 @@
+<div #content style="width:100%;height:100%;position:absolute;">
+    <button
+        (click)="createBackgroundImage('https://qntemp3.bejson.com/upload/84723844912904450.jpg?imageView2/0/w/0/h/0/format/webp')">测试创建背景图</button>
+</div>

src/app/working-area/working-area.component.ts

@@ -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;
+//     }
+//   })
+// }