Estoy usando la biblioteca https://ui.toast.com/tui-image-editor para una funcionalidad de edición de imágenes, hay un componente de selector de color que viene de forma predeterminada allí, estoy tratando de cambiar el color predeterminado de este color -picker pero no puedo encontrar una manera de hacerlo, investigué un poco y parece que este editor de imágenes está usando https://github.com/nhn/tui.color-picker como una dependencia, por lo que puede ser la forma en que es tan difícil cambiar el color.
Aquí está mi código:
<ImageEditor ref={this.editorRef} {...imageEditorOptions} includeUI={{ loadImage: {'image-path'}, theme: myTheme, menu: ['text'], initMenu: 'text', menuBarPosition: 'bottom', }} selectionStyle={{ cornerSize: 20, rotatingPointOffset: 70, }} />En la variable "myTheme", he configurado algunas configuraciones para el estilo de selección de color, pero no han funcionado para establecer su color predeterminado, probablemente porque se configura dinámicamente.
'colorpicker.button.border': '1px solid #1e1e1e', 'colorpicker.title.color': '#fff'También intenté configurar el color directamente en mi página CSS
.tui-image-editor-container .tui-image-editor-main-container { bottom: 0 !important; top: 0 !important; max-height: 450px; background-color: red !important; }actualmente no hay opción para cambiar los colores predeterminados del selector de color, consulte aquí: https://github.com/nhn/tui.image-editor/issues/258
una solución a esto es hacer uso del método startDrawingMode
para que pueda crear su propio selector de color o usar el selector de color tui y luego invocar el método StartDrawingMode usando su propia función, así es como lo hago en 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 puede ser 'FREE_DRAWING' o 'LINE_DRAWING'
este código está en Vue (Nuxt.js) pero creo que es bastante similar a React