选择颜色透明，以便可以看到图像

Question

我想在图像上画画。为此，我使用的是ng2-canvas-whiteboard

虽然它是在图像上绘画，但是我无法看到图像构建边界。

我试图设置不透明度，但它也无法正常工作，因为我不需要将我绘制的元素设为透明但我正在使用的颜色，我需要使它们透明。

我还尝试编辑ng2-canvas-whiteboard组件并为每种颜色添加了不透明度，但它也无法正常工作。

这是stackblitz demo

HTML

<div style="height: 400px">
    <canvas-whiteboard class="transparent-style" #canvasWhiteboard [imageUrl]="url" [drawButtonClass]="'drawButtonClass'" [drawButtonText]="'Draw'" [clearButtonClass]="'clearButtonClass'" [clearButtonText]="'Clear'" [undoButtonText]="'Undo'" [undoButtonEnabled]="true"
        [redoButtonText]="'Redo'" [redoButtonEnabled]="true" [colorPickerEnabled]="true" (onBatchUpdate)="sendBatchUpdate($event)" [lineWidth]="15" (onClear)="onCanvasClear()" (onUndo)="onCanvasUndo($event)" (onRedo)="onCanvasRedo($event)">
    </canvas-whiteboard>
</div>

TS

export class AppComponent {
  title = "app";
  url = "https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4293964.jpg";

  sendBatchUpdate(updates: CanvasWhiteboardUpdate[]) {
    console.log(updates);
  }
  onCanvasClear() {
    console.log("The canvas was cleared");
  }
  onCanvasUndo(updateUUID: string) {
    console.log(`UNDO with uuid: ${updateUUID}`);
  }
  onCanvasRedo(updateUUID: string) {
    console.log(`REDO with uuid: ${updateUUID}`);
  }
}

Answer 1

您可以使用stokeColor属性（即[strokeColor] =＆＃34;＆＃39; rgba（0,0,0,0.2）＆＃39;＆＃34;）。 但是，使用此属性只能选择一种颜色，更改颜色将删除透明度。

我在上一个项目中所做的是分叉ng2-canvas-whiteboard并根据我的需要更新它并在我的项目中使用。你也可以这样做。

用于颜色修改：

需要修改的文件：ng2-canvas-whiteboard / dist / canvas-whiteboard-colorpicker.component.js

功能：createColorPalette

更改：通过提供透明度值来修改所有颜色。

注意：如果按下鼠标几秒钟，透明度将会丢失。在修改所有函数之前，请使用stoke color属性来查看效果。

希望这有帮助:)