Change IO text background color to white (#2726)
Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
This commit is contained in:
parent
7ce1c4439a
commit
a7e5d2a663
@ -10,7 +10,7 @@ import { extractShapesFromRenderedClozes } from "./shapes/from-cloze";
|
|||||||
import { Polygon } from "./shapes/polygon";
|
import { Polygon } from "./shapes/polygon";
|
||||||
import { Rectangle } from "./shapes/rectangle";
|
import { Rectangle } from "./shapes/rectangle";
|
||||||
import { Text } from "./shapes/text";
|
import { Text } from "./shapes/text";
|
||||||
import { TEXT_FONT_FAMILY, TEXT_PADDING } from "./tools/lib";
|
import { TEXT_BACKGROUND_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "./tools/lib";
|
||||||
import type { Size } from "./types";
|
import type { Size } from "./types";
|
||||||
|
|
||||||
export function setupImageCloze(): void {
|
export function setupImageCloze(): void {
|
||||||
@ -136,7 +136,7 @@ function drawShape(
|
|||||||
ctx.textBaseline = "top";
|
ctx.textBaseline = "top";
|
||||||
ctx.scale(shape.scaleX, shape.scaleY);
|
ctx.scale(shape.scaleX, shape.scaleY);
|
||||||
const textMetrics = ctx.measureText(shape.text);
|
const textMetrics = ctx.measureText(shape.text);
|
||||||
ctx.fillStyle = properties.inActiveShapeColor;
|
ctx.fillStyle = TEXT_BACKGROUND_COLOR;
|
||||||
ctx.fillRect(
|
ctx.fillRect(
|
||||||
shape.left / shape.scaleX,
|
shape.left / shape.scaleX,
|
||||||
shape.top / shape.scaleY,
|
shape.top / shape.scaleY,
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
import { fabric } from "fabric";
|
import { fabric } from "fabric";
|
||||||
|
|
||||||
import { SHAPE_MASK_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "../tools/lib";
|
import { TEXT_BACKGROUND_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "../tools/lib";
|
||||||
import type { ConstructorParams, Size } from "../types";
|
import type { ConstructorParams, Size } from "../types";
|
||||||
import type { ShapeDataForCloze } from "./base";
|
import type { ShapeDataForCloze } from "./base";
|
||||||
import { Shape } from "./base";
|
import { Shape } from "./base";
|
||||||
@ -41,7 +41,7 @@ export class Text extends Shape {
|
|||||||
return new fabric.IText(this.text, {
|
return new fabric.IText(this.text, {
|
||||||
...this,
|
...this,
|
||||||
fontFamily: TEXT_FONT_FAMILY,
|
fontFamily: TEXT_FONT_FAMILY,
|
||||||
backgroundColor: SHAPE_MASK_COLOR,
|
backgroundColor: TEXT_BACKGROUND_COLOR,
|
||||||
padding: TEXT_PADDING,
|
padding: TEXT_PADDING,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -9,6 +9,7 @@ import { zoomResetValue } from "../store";
|
|||||||
|
|
||||||
export const SHAPE_MASK_COLOR = "#ffeba2";
|
export const SHAPE_MASK_COLOR = "#ffeba2";
|
||||||
export const BORDER_COLOR = "#212121";
|
export const BORDER_COLOR = "#212121";
|
||||||
|
export const TEXT_BACKGROUND_COLOR = "#ffffff";
|
||||||
export const TEXT_FONT_FAMILY = "Arial";
|
export const TEXT_FONT_FAMILY = "Arial";
|
||||||
export const TEXT_PADDING = 5;
|
export const TEXT_PADDING = 5;
|
||||||
|
|
||||||
|
@ -6,8 +6,8 @@ import { fabric } from "fabric";
|
|||||||
import {
|
import {
|
||||||
disableRotation,
|
disableRotation,
|
||||||
enableUniformScaling,
|
enableUniformScaling,
|
||||||
SHAPE_MASK_COLOR,
|
|
||||||
stopDraw,
|
stopDraw,
|
||||||
|
TEXT_BACKGROUND_COLOR,
|
||||||
TEXT_FONT_FAMILY,
|
TEXT_FONT_FAMILY,
|
||||||
TEXT_PADDING,
|
TEXT_PADDING,
|
||||||
} from "./lib";
|
} from "./lib";
|
||||||
@ -32,7 +32,7 @@ export const drawText = (canvas: fabric.Canvas): void => {
|
|||||||
strokeWidth: 1,
|
strokeWidth: 1,
|
||||||
noScaleCache: false,
|
noScaleCache: false,
|
||||||
fontFamily: TEXT_FONT_FAMILY,
|
fontFamily: TEXT_FONT_FAMILY,
|
||||||
backgroundColor: SHAPE_MASK_COLOR,
|
backgroundColor: TEXT_BACKGROUND_COLOR,
|
||||||
padding: TEXT_PADDING,
|
padding: TEXT_PADDING,
|
||||||
});
|
});
|
||||||
disableRotation(text);
|
disableRotation(text);
|
||||||
|
Loading…
Reference in New Issue
Block a user