Я хочу отразить отображение аналогового сегмента в моем приложении React Native. Сегментный дисплей довольно сложный, он состоит из более чем 100 различных сегментов. Он содержит три 7-сегментных дисплея для чисел и индикатор выполнения с 20 элементами. Остальные являются пользовательскими формами и символами, которые предоставляют информацию о текущем состоянии машины, к которой он подключен. У меня есть некоторый опыт работы с HTML canvas, я нашел модуль React Native response-native-canvas и хотел попробовать его. Тем не менее, рисование на реагирующем холсте кажется довольно медленным по сравнению с холстом HTML, который я могу использовать в веб-браузере.
Вот что я делаю:
- Я импортирую модуль в свой компонент:
import Canvas, {Image as CanvasImage, Path2D, ImageData} from 'react-native-canvas';
Добавить элемент холста в мою функцию рендеринга:
<Canvas ref={this.handleCanvas}/>
Сохраните ссылку на холст и установите его размер:
handleCanvas = (canvas) => {
if (this.myCanvas === null && canvas !== null){
canvas.width = 250;
canvas.height = 250;
this.myCanvas = canvas;
}
}
Затем я могу вызвать для каждого сегмента функцию «рисования», которая использует aws 2D-путь:
draw(ctx){
ctx.save();
ctx.strokeStyle="#000000";
ctx.lineWidth=2;
ctx.lineJoin="round";
ctx.font=" 10px sans-serif";
ctx.beginPath();
ctx.moveTo(158.108112514019,24.324327290058136);
ctx.lineTo(159.45946389436722,24.324327290058136);
ctx.lineTo(160.13513958454132,25.67567867040634);
...
ctx.lineTo(162.16216665506363,25.00000298023224);
ctx.fill("nonzero");
ctx.stroke();
ctx.restore();
}
Я получаю контекст, подобный этому: var ctx = this.myCanvas.getContext('2d');
Я сделал прототип с 13 сегментами. Каждый сегмент имеет около 50 узлов, и я рисую все 13 сегментов одновременно. В моем приложении React Native рисование занимает почти одну секунду, что слишком медленно (и есть еще 90 сегментов, которые я еще не рендерил ...). Если я нарисую те же пути на холсте HTML в Google Chrome, это займет всего 2-5 миллисекунд.
У кого-нибудь есть идеи, как я могу улучшить производительность? Или есть другая библиотека, которая более производительна для моих целей? `
Заранее спасибо!