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 { BaseStruct, isFrameContainPoint, ns2x, Rect, Render } from './ProcedureWorkerCommon'; 17import { TraceRow } from '../../component/trace/base/TraceRow'; 18 19export class FpsRender extends Render { 20 renderMainThread( 21 req: { 22 context: CanvasRenderingContext2D; 23 useCache: boolean; 24 type: string; 25 }, 26 row: TraceRow<FpsStruct> 27 ) { 28 let fpsList = row.dataList; 29 let fpsFilter = row.dataListCache; 30 fps( 31 fpsList, 32 fpsFilter, 33 TraceRow.range!.startNS || 0, 34 TraceRow.range!.endNS || 0, 35 TraceRow.range!.totalNS || 0, 36 row.frame, 37 req.useCache || !TraceRow.range!.refresh 38 ); 39 req.context.beginPath(); 40 let fpsFind = false; 41 for (let re of fpsFilter) { 42 FpsStruct.draw(req.context, re); 43 if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) { 44 FpsStruct.hoverFpsStruct = re; 45 fpsFind = true; 46 } 47 } 48 if (!fpsFind && row.isHover) FpsStruct.hoverFpsStruct = undefined; 49 req.context.closePath(); 50 let maxFps = FpsStruct.maxFps + 'FPS'; 51 let textMetrics = req.context.measureText(maxFps); 52 req.context.globalAlpha = 0.8; 53 req.context.fillStyle = '#f0f0f0'; 54 req.context.fillRect(0, 5, textMetrics.width + 8, 18); 55 req.context.globalAlpha = 1; 56 req.context.fillStyle = '#333'; 57 req.context.textBaseline = 'middle'; 58 req.context.fillText(maxFps, 4, 5 + 9); 59 } 60} 61 62export function fps( 63 list: Array<any>, 64 res: Array<any>, 65 startNS: number, 66 endNS: number, 67 totalNS: number, 68 frame: any, 69 use: boolean 70) { 71 if (use && res.length > 0) { 72 res.forEach((it) => FpsStruct.setFrame(it, 5, startNS, endNS, totalNS, frame)); 73 return; 74 } 75 FpsStruct.maxFps = 0; 76 res.length = 0; 77 if (list) { 78 for (let i = 0, len = list.length; i < len; i++) { 79 let it = list[i]; 80 if ((it.fps || 0) > FpsStruct.maxFps) { 81 FpsStruct.maxFps = it.fps || 0; 82 } 83 if (i === list.length - 1) { 84 it.dur = endNS - (it.startNS || 0); 85 } else { 86 it.dur = (list[i + 1].startNS || 0) - (it.startNS || 0); 87 } 88 if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) { 89 FpsStruct.setFrame(list[i], 5, startNS, endNS, totalNS, frame); 90 setFPSFilter(list, i, res); 91 } 92 } 93 } 94} 95 96function setFPSFilter(list: Array<any>, i: number, res: Array<any>) { 97 if ( 98 i > 0 && 99 (list[i - 1].frame?.x || 0) === (list[i].frame?.x || 0) && 100 (list[i - 1].frame?.width || 0) === (list[i].frame?.width || 0) 101 ) { 102 } else { 103 res.push(list[i]); 104 } 105} 106 107export class FpsStruct extends BaseStruct { 108 static maxFps: number = 0; 109 static maxFpsName: string = '0 FPS'; 110 static hoverFpsStruct: FpsStruct | undefined; 111 static selectFpsStruct: FpsStruct | undefined; 112 fps: number | undefined; 113 startNS: number | undefined = 0; 114 dur: number | undefined; //自补充，数据库没有返回 115 116 static draw(fpsContext: CanvasRenderingContext2D, data: FpsStruct) { 117 if (data.frame) { 118 let width = data.frame.width || 0; 119 fpsContext.fillStyle = '#535da6'; 120 fpsContext.strokeStyle = '#535da6'; 121 if (data === FpsStruct.hoverFpsStruct) { 122 fpsContext.lineWidth = 1; 123 fpsContext.globalAlpha = 0.6; 124 let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps; 125 fpsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight); 126 fpsContext.beginPath(); 127 fpsContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true); 128 fpsContext.fill(); 129 fpsContext.globalAlpha = 1.0; 130 fpsContext.stroke(); 131 fpsContext.beginPath(); 132 fpsContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight); 133 fpsContext.lineWidth = 3; 134 fpsContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight); 135 fpsContext.stroke(); 136 } else { 137 fpsContext.globalAlpha = 0.6; 138 fpsContext.lineWidth = 1; 139 let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps; 140 fpsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight); 141 } 142 } 143 fpsContext.globalAlpha = 1.0; 144 fpsContext.lineWidth = 1; 145 } 146 147 static setFrame(fpsNode: FpsStruct, padding: number, startNS: number, endNS: number, totalNS: number, frame: Rect) { 148 let fpsLeftPointX: number, fpsRightPointX: number; 149 if ((fpsNode.startNS || 0) < startNS) { 150 fpsLeftPointX = 0; 151 } else { 152 fpsLeftPointX = ns2x(fpsNode.startNS || 0, startNS, endNS, totalNS, frame); 153 } 154 if ((fpsNode.startNS || 0) + (fpsNode.dur || 0) > endNS) { 155 fpsRightPointX = frame.width; 156 } else { 157 fpsRightPointX = ns2x((fpsNode.startNS || 0) + (fpsNode.dur || 0), startNS, endNS, totalNS, frame); 158 } 159 let getV: number = fpsRightPointX - fpsLeftPointX <= 1 ? 1 : fpsRightPointX - fpsLeftPointX; 160 let rectangle: Rect = new Rect( 161 Math.floor(fpsLeftPointX), 162 Math.ceil(frame.y + padding), 163 Math.ceil(getV), 164 Math.floor(frame.height - padding * 2) 165 ); 166 fpsNode.frame = rectangle; 167 } 168} 169 170const textPadding = 2; 171