使用 konva 在画布中绘制类似网格的电子表格
Posted
技术标签:
【中文标题】使用 konva 在画布中绘制类似网格的电子表格【英文标题】:Drawing a spreadsheet like grid in canvas with konva 【发布时间】:2019-06-26 20:55:18 【问题描述】:我正在使用 html5 画布和 Konvajs 画布库进行类似甘特图的任务显示。
将甘特图解构为它的组件使我目前看到如下视图。这里1是任务列表,2是任务栏区域,3是任务栏,4是文本单元格。
对于这个问题,我正在寻找构建 1 和 4 的代码。要显示的数据将在带有嵌套任务列表的普通 JS 对象中传递,其中每个任务都有一个编号、名称、分配给的人名、开始日期、结束日期、持续时间和完成百分比。
因此,要求是能够构建类似电子表格的面板,如甘特图左侧所示。
我已经开发了一些部分,我将发布作为答案。然而,这似乎是一种常见的需求,我希望有人可以将代码剪切并粘贴到 SO 中以引领潮流。
注意:示例图像中的甘特图来自Vertex42。
【问题讨论】:
【参考方案1】:所以这是我自己在一种方法上的笨拙尝试。任何人都可以改进它还是我走错了路。
编辑:我现在有一个新兴的组件,用于将文本绘制到类似电子表格的单元格中,包括完成百分比着色。为了保持这个答案整洁,这个附加组件位于this codepen。
// this is the object that defines our grid
//
var gridData = name: 'grid1', width: 350, height: 400, rowHeight: 24, padding: 4, fill: 'azure', gridLineColor: '#ccc', header: size: 16, fill: 'black', color: 'white' , data: size: 16, fill: 'azure', color: 'black' ,
row: [
cells: // row 1
[
width: 50, text: 'Item', style: 'header',
width: 240, text: 'Name', style: 'header',
width: 60, text: 'Status', style: 'header',
]
,
cells: // row 2
[
text: '1',
text: 'Find tea pot',
text: '100%',
]
,
cells: // row 3
[
text: '2',
text: 'Boil water',
text: '60%',
]
]
// From here on could be wrapped into a component that churns out grids. Maybe you pass in the id of the stage container
// and the data model you want to produce, etc.
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// make a main group for the grid, call it a panel. Assigning a name may be handy later
var panel = new Konva.Group(name: gridData.name);
layer.add(panel); // Add the panel to the layer
// a group has no visual properties. Add a background rect to hold the colour fill
var panelRect = new Konva.Rect(width: gridData.width, height: gridData.height, fill: gridData.fill)
panel.add(panelRect);
var topLeft = x: 0, y: 0; // Since we are drawing a grid, we need to compute the position of each cell
for (var i = 0; i < gridData.row.length; i = i + 1)
topLeft.x = 0; // reset x at start of each row
// iterate for each cell on the row
for (var j = 0; j < gridData.row[i].cells.length; j = j + 1)
var cell = new Konva.Rect(name: 'cellBg', // assign a name for later searching
x: topLeft.x, y: topLeft.y, // position as computed
width: gridData.row[0].cells[j].width, // use the first row from celldate to get the cell width
height: gridData.rowHeight, // grid has a uniform row height
stroke: gridData.gridLineColor, // and line colour
strokeWidth: 1, // use a set line width but you can add to the gridData object as needed.
fill: (i === 0 ? gridData.header.fill : gridData.data.fill), // use the given header text color
);
panel.add(cell);
// Add text to the cell. Note that if you wanted to be using alignments you would need to draw the text off-screen and
// get width/height of that text then use those values for positioning calculations. Once you have the rect size of the
// text, all the alignments are simple math.
var text = new Konva.Text( x: topLeft.x + gridData.padding, // add padding to locate the text nicely into the cell
y: topLeft.y + gridData.padding,
// use the given text size
fontSize: (i === 0 ? gridData.header.size : gridData.data.size),
// use the given header text color
fill: (i === 0 ? gridData.header.color : gridData.data.color),
text: gridData.row[i].cells[j].text, // set the text value.
listening: false // stop text interfering with mouse events
);
panel.add(text);
cell.on('mouseover', function(evt)
var shape = evt.target;
$(shape).data('bgColor', shape.fill());
shape.fill('lime');
layer.draw();
)
cell.on('mouseout', function(evt)
var shape = evt.target;
shape.fill($(shape).data('bgColor'));
layer.draw();
)
topLeft.x = topLeft.x + gridData.row[0].cells[j].width; // offset the computed next cell x value by the width of the cell
topLeft.y = topLeft.y + gridData.rowHeight; // offset the computed next cell y value by the height of the row
layer.draw();
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
【讨论】:
以上是关于使用 konva 在画布中绘制类似网格的电子表格的主要内容,如果未能解决你的问题,请参考以下文章
无法使用 Konva 将 PDF 图像作为图像对象加载到 HTML5 画布中