1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { RectF } from '../base/Rect' 17import { MathUtils } from './MathUtils' 18 19export abstract class DrawingUtils { 20 private static readonly DEFAULT_LINE_WIDTH: number = 0.5; 21 private static readonly DEFAULT_BUTTON_WIDTH: number = 3; 22 private static readonly DEFAULT_BUTTON_PADDING: number = 1; 23 private static readonly DEFAULT_BUTTON_LENGTH: number = 20; 24 private static readonly DEFAULT_LINE_COLOR: string = '#80FFFFFF'; 25 private static readonly DEFAULT_BUTTON_COLOR: string = 'white'; 26 private static readonly DEFAULT_MASK_STYLE: string = 'rgba(0, 0, 0, 0.3)'; 27 28 static drawMask(ctx: CanvasRenderingContext2D, outer: RectF, inner: RectF) { 29 ctx.fillStyle = DrawingUtils.DEFAULT_MASK_STYLE; 30 ctx.fillRect(outer.left, outer.top, outer.getWidth(), inner.top - outer.top); 31 ctx.fillRect(outer.left, inner.top, inner.left - outer.left, inner.getHeight()); 32 ctx.fillRect(inner.right, inner.top, outer.right - inner.right, inner.getHeight()); 33 ctx.fillRect(outer.left, inner.bottom, outer.getWidth(), outer.bottom - inner.bottom); 34 } 35 36 static drawCropButton(ctx: CanvasRenderingContext2D, crop: RectF) { 37 let vp3 = DrawingUtils.DEFAULT_BUTTON_WIDTH; 38 let padding = DrawingUtils.DEFAULT_BUTTON_PADDING; 39 ctx.lineWidth = vp3; 40 ctx.strokeStyle = DrawingUtils.DEFAULT_BUTTON_COLOR; 41 let cornerLength = DrawingUtils.DEFAULT_BUTTON_LENGTH; 42 DrawingUtils.drawCornerButton(ctx, crop, vp3, padding, cornerLength); 43 DrawingUtils.drawLineButton(ctx, crop, vp3, padding, cornerLength); 44 } 45 46 private static drawCornerButton(ctx: CanvasRenderingContext2D, crop: RectF, 47 vp3: number, padding: number, cornerLength: number) { 48 // left top conner button 49 let startX = crop.left - vp3 - padding; 50 let startY = crop.top - vp3; 51 let stopX = startX + cornerLength; 52 let stopY = startY; 53 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 54 startX = crop.left - vp3; 55 startY = crop.top - vp3 - padding; 56 stopX = startX; 57 stopY = startY + cornerLength; 58 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 59 60 // right top conner button 61 startX = crop.right + vp3 + padding; 62 startY = crop.top - vp3; 63 stopX = startX - cornerLength; 64 stopY = startY; 65 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 66 startX = crop.right + vp3; 67 startY = crop.top - vp3 - padding; 68 stopX = startX; 69 stopY = startY + cornerLength; 70 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 71 72 // left bottom conner button 73 startX = crop.left - vp3; 74 startY = crop.bottom + vp3 + padding; 75 stopX = startX; 76 stopY = startY - cornerLength; 77 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 78 startX = crop.left - vp3 - padding; 79 startY = crop.bottom + vp3; 80 stopX = startX + cornerLength; 81 stopY = startY; 82 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 83 84 // right bottom conner button 85 startX = crop.right + vp3 + padding; 86 startY = crop.bottom + vp3; 87 stopX = startX - cornerLength; 88 stopY = startY; 89 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 90 startX = crop.right + vp3; 91 startY = crop.bottom + vp3 + padding; 92 stopX = startX; 93 stopY = startY - cornerLength; 94 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 95 } 96 97 private static drawLineButton(ctx: CanvasRenderingContext2D, crop: RectF, 98 vp3: number, padding: number, cornerLength: number) { 99 // top button 100 let startX = crop.getCenterX() - cornerLength / 2; 101 let startY = crop.top - vp3; 102 let stopX = startX + cornerLength; 103 let stopY = startY; 104 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 105 106 // bottom button 107 startX = crop.getCenterX() - cornerLength / 2; 108 startY = crop.bottom + vp3; 109 stopX = startX + cornerLength; 110 stopY = startY; 111 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 112 113 // left button 114 startX = crop.left - vp3; 115 startY = crop.getCenterY() - cornerLength / 2; 116 stopX = startX; 117 stopY = startY + cornerLength; 118 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 119 120 // right button 121 startX = crop.right + vp3; 122 startY = crop.getCenterY() - cornerLength / 2; 123 stopX = startX; 124 stopY = startY + cornerLength; 125 DrawingUtils.drawLine(ctx, startX, startY, stopX, stopY); 126 } 127 128 static drawRect(ctx: CanvasRenderingContext2D, crop: RectF) { 129 ctx.lineWidth = DrawingUtils.DEFAULT_LINE_WIDTH; 130 ctx.strokeStyle = DrawingUtils.DEFAULT_LINE_COLOR; 131 let points = MathUtils.rectToPoints(crop); 132 for (let i = 0; i < points.length; i++) { 133 let j = (i + 1) % points.length; 134 DrawingUtils.drawLine(ctx, points[i].x, points[i].y, points[j].x, points[j].y); 135 } 136 } 137 138 static drawSplitLine(ctx: CanvasRenderingContext2D, crop: RectF, split) { 139 ctx.lineWidth = DrawingUtils.DEFAULT_LINE_WIDTH; 140 ctx.strokeStyle = DrawingUtils.DEFAULT_LINE_COLOR; 141 let w = Math.ceil(crop.getWidth() / split); 142 let h = Math.ceil(crop.getHeight() / split); 143 for (let i = 1; i < split; i++) { 144 let x = crop.left + w * i; 145 let y = crop.top + h * i; 146 DrawingUtils.drawLine(ctx, x, crop.top, x, crop.bottom); 147 DrawingUtils.drawLine(ctx, crop.left, y, crop.right, y); 148 } 149 } 150 151 static drawLine(ctx: CanvasRenderingContext2D, srcX: number, srcY: number, dstX: number, dstY: number) { 152 ctx.beginPath(); 153 ctx.moveTo(srcX, srcY); 154 ctx.lineTo(dstX, dstY); 155 ctx.stroke(); 156 } 157}