根据画布背景自适应框选线色

src/jlgraphic/plugins/CommonMousePlugin.ts

@@ -1,5 +1,11 @@
-import { DisplayObject, FederatedMouseEvent, Graphics, Point } from 'pixi.js';
-import { IGraphicScene } from '../app';
+import {
+  Color,
+  DisplayObject,
+  FederatedMouseEvent,
+  Graphics,
+  Point,
+} from 'pixi.js';
+import { ICanvasProperties, IGraphicScene } from '../app';
 import { JlGraphic } from '../core';
 import {
   AppDragEvent,
@@ -66,6 +72,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
   static SelectBox = '__select_box';
   options: CompleteMouseToolOptions;
   box: Graphics;
+  _boxLineColor: Color;
   leftDownTarget: DisplayObject | null = null;
 
   drag = false;
@@ -73,16 +80,19 @@ export class CommonMouseTool extends AppInteractionPlugin {
 
   rightTarget: DisplayObject | null = null;
 
-  constructor(graphicApp: IGraphicScene) {
-    super(CommonMouseTool.Name, graphicApp);
+  constructor(scene: IGraphicScene) {
+    super(CommonMouseTool.Name, scene);
     this.options = new CompleteMouseToolOptions();
 
     this.box = new Graphics();
+    this._boxLineColor = new Color();
+
+    scene.canvas.on('dataupdate', this.updateBoxLineColor, this);
     this.box.name = CommonMouseTool.SelectBox;
     this.box.visible = false;
     this.app.canvas.addAssistantAppends(this.box);
 
-    graphicApp.on('options-update', (options) => {
+    scene.on('options-update', (options) => {
       if (options.mouseToolOptions) {
         this.options.update(options.mouseToolOptions);
         if (this.isActive()) {
@@ -97,6 +107,13 @@ export class CommonMouseTool extends AppInteractionPlugin {
     return new CommonMouseTool(app);
   }
 
+  private updateBoxLineColor(cp: ICanvasProperties) {
+    // 根据画布背景调整线色
+    const color = new Color(cp.backgroundColor);
+    const cn = color.toNumber() ^ 0xffffff;
+    this._boxLineColor.setValue(cn);
+  }
+
   bind(): void {
     const canvas = this.app.canvas;
     canvas.on('mousedown', this.onMouseDown, this);
@@ -294,7 +311,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
     if (!this.drag) return;
     // 绘制框选矩形框
     this.box.clear();
-    this.box.lineStyle({ width: 1, color: this.options.boxSelectColor });
+    this.box.lineStyle({ width: 1, color: this._boxLineColor });
     const dsx = end.x - start.x;
     const dsy = end.y - start.y;
     let { x, y } = start;