如何使用@toast-ui/react-image-editor更改tui-color-picker的默认颜色？

Question

我正在使用 https://ui.toast.com/tui-image-editor library for a image edition functionality, there's a color picker component that comes by default there, I'm trying to change the default color of this color-picker but I can't find a way to do that, I've done some research and looks like this image-editor is using https://github.com/nhn/tui.color-picker 作为依赖项，因此可能很难更改颜色。

这是我的代码：

 <ImageEditor ref={this.editorRef} {...imageEditorOptions} 
            includeUI={{
              loadImage: {'image-path'},
              theme: myTheme,
              menu: ['text'],
              initMenu: 'text',
              menuBarPosition: 'bottom',
            }}
            selectionStyle={{
              cornerSize: 20,
              rotatingPointOffset: 70,
            }}
        />

在“myTheme”变量上，我已经为颜色选择样式设置了一些配置，但它们没有设置其默认颜色，可能是因为它是动态设置的。

'colorpicker.button.border': '1px solid #1e1e1e',
'colorpicker.title.color': '#fff'

我也试过直接在我的页面上设置颜色 CSS

.tui-image-editor-container .tui-image-editor-main-container {
    bottom: 0 !important;
    top: 0 !important;
    max-height: 450px;
    background-color: red !important;
}

Answer 1

目前没有更改颜色选择器默认颜色的选项，参考这里：https://github.com/nhn/tui.image-editor/issues/258

解决此问题的方法是使用 startDrawingMode 方法

因此您可以创建自己的颜色选择器或使用 tui 颜色选择器，然后使用您自己的函数调用 StartDrawingMode 方法，这是我在 Vue 中的做法 (Nuxt.js)

<MyColorPicker @colorPicked="startDrawing" />

<tui-image-editor ref="imageEditor">
</tui-image-editor>

startDrawing({ color, drawStyle, size }) {
      this.$refs.imageEditor.invoke('stopDrawingMode')
      this.$refs.imageEditor.invoke('startDrawingMode', drawStyle, {
        width: size,
        color,
      })
    }

drawStyle 可以是 'FREE_DRAWING' 或 'LINE_DRAWING'

此代码在 Vue (Nuxt.js) 中，但我相信它与 React

非常相似

如何使用@toast-ui/react-image-editor更改tui-color-picker的默认颜色？

How to change the tui-color-picker default color using @toast-ui/react-image-editor?

javascript

css

frontend

reactjs

toast-ui-image-editor