如何在画布中实现“Excel like”“添加单元格”

Question

我很抱歉标题，它可能无法正确描述我想要实现的目标。我开始开发一个新软件，它应该向用户呈现一个“网格”，他可以在这个“网格”的任何点添加“行”或“列”来操作。问题是我不确定真正的网格是合适的解决方案，因为有一些“图形”要求，例如更改单个单元格大小、嵌套它们、缩放/拉伸等。所以我开始分析 WPF 中的解决方案使用 DrawingVisual 元素（出于性能原因）。 我能够以所需的方式绘制“网格”。我还可以在绘图的边缘添加行或列。但我想不出任何解决方案来在“中间”修改它（除了重绘整个东西）。我会用一张图片更好地解释我。左边是第一次绘制后的“网格”。右边有一个新的网格，应该在用户执行操作后绘制。

下面是一个更复杂的示例，其中“行”被添加到现有单元格中，导致所有单元格“增长”。

正如我所说，我知道我可以重绘整个东西，但我担心性能。请记住，在真实场景中可能有数千个块和许多嵌套级别。

感谢任何建议。 WPF 的使用不是强制性的，但它将是 .NET 5.0 中的桌面应用程序。 DrawingVisual 的使用也不是强制性的。我可以评估任何解决方案。谢谢。

Answer 1

一种简单的技术是在您第一次绘制表格时将列相对于画布左侧的位置保留在一个变量中。当您要添加新列时，可以从该点裁剪图像，然后在更大的画布中复制左右部分，然后从头开始绘制中间列。

当然，每列的坐标可以用图像处理技术计算出来，但是会降低性能。

我用 Python 编写了这段代码，但我认为将其转换为 C# 并不困难。

import cv2
import numpy as np

# copy image over another
def imdraw(im, over, x, y):
    y1, y2 = y, y + over.shape[0]
    x1, x2 = x, x + over.shape[1]
    for c in range(0, 3):
        im[y1:y2, x1:x2, c] = over[:, :, c]
    return im


pt = 220
col = 300
off = 15

im = cv2.imread("grid.png", 1)
h, w = im.shape[:2]

crop_left = im[0 : 0 + h, 0:pt]
crop_right = im[0 : 0 + h, pt:w]

cv2.imwrite("left.jpg", crop_left)
cv2.imwrite("right.jpg", crop_right)

# Create an Empty image with white background
out = 255 * np.ones(shape=[h, w + col, 3], dtype=np.uint8)

out = imdraw(out, crop_left, 0, 0)
out = imdraw(out, crop_right, pt + col, 0)

out = cv2.rectangle(
    out,
    pt1=(pt + off, off),
    pt2=(pt + col - off, h - off),
    color=(128, 0, 200),
    thickness=5,
    lineType=cv2.LINE_AA,
)

cv2.imwrite("out.jpg", out)

---

输出：