joylink/graphic-pixi
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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

Browse Source
This commit is contained in:
walker 2023-09-01 16:26:10 +08:00
parent e7a5746769
commit 4fb52cc103
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/jlgraphic/plugins/CommonMousePlugin.ts
View File

@ -1,5 +1,11 @@
import { DisplayObject, FederatedMouseEvent, Graphics, Point } from 'pixi.js'; import {
import { IGraphicScene } from '../app'; Color,
DisplayObject,
FederatedMouseEvent,
Graphics,
Point,
} from 'pixi.js';
import { ICanvasProperties, IGraphicScene } from '../app';
import { JlGraphic } from '../core'; import { JlGraphic } from '../core';
import { import {
AppDragEvent, AppDragEvent,
@ -66,6 +72,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
static SelectBox = '__select_box'; static SelectBox = '__select_box';
options: CompleteMouseToolOptions; options: CompleteMouseToolOptions;
box: Graphics; box: Graphics;
_boxLineColor: Color;
leftDownTarget: DisplayObject | null = null; leftDownTarget: DisplayObject | null = null;
drag = false; drag = false;
@ -73,16 +80,19 @@ export class CommonMouseTool extends AppInteractionPlugin {
rightTarget: DisplayObject | null = null; rightTarget: DisplayObject | null = null;
constructor(graphicApp: IGraphicScene) { constructor(scene: IGraphicScene) {
super(CommonMouseTool.Name, graphicApp); super(CommonMouseTool.Name, scene);
this.options = new CompleteMouseToolOptions(); this.options = new CompleteMouseToolOptions();
this.box = new Graphics(); this.box = new Graphics();
this._boxLineColor = new Color();
scene.canvas.on('dataupdate', this.updateBoxLineColor, this);
this.box.name = CommonMouseTool.SelectBox; this.box.name = CommonMouseTool.SelectBox;
this.box.visible = false; this.box.visible = false;
this.app.canvas.addAssistantAppends(this.box); this.app.canvas.addAssistantAppends(this.box);
graphicApp.on('options-update', (options) => { scene.on('options-update', (options) => {
if (options.mouseToolOptions) { if (options.mouseToolOptions) {
this.options.update(options.mouseToolOptions); this.options.update(options.mouseToolOptions);
if (this.isActive()) { if (this.isActive()) {
@ -97,6 +107,13 @@ export class CommonMouseTool extends AppInteractionPlugin {
return new CommonMouseTool(app); 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 { bind(): void {
const canvas = this.app.canvas; const canvas = this.app.canvas;
canvas.on('mousedown', this.onMouseDown, this); canvas.on('mousedown', this.onMouseDown, this);
@ -294,7 +311,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
if (!this.drag) return; if (!this.drag) return;
// 绘制框选矩形框 // 绘制框选矩形框
this.box.clear(); 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 dsx = end.x - start.x;
const dsy = end.y - start.y; const dsy = end.y - start.y;
let { x, y } = start; let { x, y } = start;