Konva Template

by mesak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/8.3.14/konva.min.js"></script>
<div id="container"></div>
<!--https://jsbin.com/mebizalulu/2/edit?html,js,output-->

CSS

body {
  margin: 0;
}

Babel + JSX

const stage = new Konva.Stage({
   container: 'container',
   width: window.innerWidth,
   height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);
const rectBG = new Konva.Rect({
   x : 0, y : 0, width: 600, height: 600,
   fill: '#999',
});
layer.add(rectBG)

layer.draw();

const group = new Konva.Group({
  draggable: true,
  x: 50,
  y: 50
});
layer.add(group);


const rect = new Konva.Rect({
   x : 0, y : 0, width: 200, height: 200,
   fillLinearGradientColorStops : [0, '#fff', 0.5, 'blue', 1, 'green'],
   fillLinearGradientStartPoint : { x: 0, y: 0 },
   fillLinearGradientEndPoint: { x: 200, y: 200 },
});


var lineBlob = new Konva.Line({
  points: [0, 0, 200,0,200,200,0,200],
  strokeWidth: 10,
  stroke: 'black',
  //tension: 0.5,
  //globalCompositeOperation: 'destination-in',
  x: 0,
  y: 0,
  closed: true,
});


group.add(rect)
group.add(lineBlob)

let muiltData = [
    { title : '123',  value : 78,unit : 'sec'},
    { title : '123123AAA',  value : 612366,unit : 'sec'},
    { title : '123',  value : 333,unit : 'sec'},
    { title : '12355',  value : 596,unit : 'sec'},
    { title : '123',  value : 231,unit : 'sec'},
    { title : '12356',  value : 12,unit : 'sec'},
]
let baseY = 0;
let maxWidth = 120;
let maxTitleWidth = 0;
let maxHeight = 0;
let unitWidth = 16;
muiltData.forEach( (item) =>{
    let fullText = `${item.title} ${item.value}/${item.unit}`;
    let textFull = new Konva.Text({text : fullText,padding: 5});
    let textTitle = new Konva.Text({text : item.title,padding: 5});
    maxTitleWidth = ( textTitle.width() > maxTitleWidth ) ? textTitle.width() : maxTitleWidth
    maxWidth = ( textFull.width() > maxWidth ) ? textFull.width() : maxWidth
    maxHeight = ( textFull.height() > maxHeight ) ? textFull.height() : maxHeight
})

maxWidth = parseInt(Math.round(maxWidth))+5;
let valueWidth = maxWidth - parseInt(maxTitleWidth) - unitWidth
let listGroup = new Konva.Group({
    width: maxWidth,
    height: maxHeight *...