javascript — бесконечная сетка Конвы в React

Конва бесконечная сетка в React

Я пытаюсь узнать, как использовать canvas через пакет реагировать -konva. Я нашел именно то, что мне нужно написать в javascript, но мне нужно, чтобы он был похож на компонент реагирования и добавлял изображения, где прямоугольники находятся при нажатии кнопки. Может кто-нибудь помочь мне реорганизовать код для отображения его в реагировать …. Это та скрипка, которую я нашел в Интернете … https://jsfiddle.net/kiksy/jqo2h3dx/2/

 const stage = new Konva.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight, draggable: true }); const layer = new Konva.Layer(); stage.add(layer); const WIDTH = 100; const HEIGHT = 100; const grid = [ ['red', 'yellow'], ['green', 'blue'] ]; const blocks = [ { w: 150, h: 150 , background: "white" , image: "/img/test2.png" , fullImage: false, title: "" , text: "" }, { w: 150, h: 150 , background: "white" , image: "/img/person-icon.png" , fullImage: false ,title: "" , text: "" }, { w: 150, h: 150 , background: "#575756" , image: "" , fullImage: false, title: "Title" , text: "" }, { w: 300, h: 300 , background: "white" , image: "/img/test.png", fullImage: true, title: "" , text: "" } ]; function checkShapes() { const startX = Math.floor((-stage.x() - stage.width()) / WIDTH) * WIDTH; const endX = Math.floor((-stage.x()   stage.width() * 2) / WIDTH) * WIDTH; const startY = Math.floor((-stage.y() - stage.height()) / HEIGHT) * HEIGHT; const endY = Math.floor((-stage.y()   stage.height() * 2) / HEIGHT) * HEIGHT; var i = 0; for(var x = startX; x {amp}lt; endX; x  = WIDTH) { for(var y = startY; y {amp}lt; endY; y  = HEIGHT) { if(i === 4) { i = 0; } const indexX = Math.abs(x / WIDTH) % grid.length; const indexY = Math.abs(y / HEIGHT) % grid[0].length; layer.add(new Konva.Rect({ x, y, width: WIDTH, height: HEIGHT, fill: grid[indexX][indexY], stroke: 'black', strokeWidth: 4 })) if(blocks[i].title != ""){ var complexText = new Konva.Text({ x, y, text: "TEST TEXT", fontSize: 14, fontFamily: 'Calibri', fill: 'white', width: WIDTH, height: HEIGHT, verticalAlign: 'middle', align : "center" }); layer.add(complexText); } } i   } } checkShapes(); layer.draw(); stage.on('dragend', () ={amp}gt; { layer.destroyChildren(); checkShapes(); layer.draw(); }) 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector