使用konva在画布中绘制类似网格的电子表格

文章/答案/技术大牛

发布

1回答

html5-canvas、konvajs

我正在使用HTML5 canvas和Konvajs canvas库开发一个类似甘特图的任务显示。将甘特图解构为它的组件，我现在看到的视图如下所示。要显示的数据将在普通的JS对象中传递，其中每个任务都有一个编号、名称、分配给人员的姓名、开始日期、结束日期、天数持续时间和完成百分比。因此，需要能够构造一个类似于电子表格的面板，如甘特图左侧所示。 ? 我已经部分开发了一些东西，

浏览 90提问于2019-02-02得票数 1

1回答

KonvaJS如何处理画布上的绘图

reactjs、konvajs、konvajs-reactjs

我真的很喜欢Konva语法 <Layer> </Layer>然而，源代码使我感到困惑。我理解<Circle />的方式实际上并不是在其呈现中返回DOM元素。相反，它在上面定义的画布上绘制。它是如何做到这一点的。有人能给我指一下密码吗

浏览 2提问于2018-12-04得票数 0

回答已采纳

1回答

使用合成MouseEvent单击Konva阶段不会触发

mouseevent、konvajs

我正在使用点击Konva舞台。用户不会直接点击Konva的画布，相反，用户会单击其他的东西，并且根据一些计算将单击转换为Konva画布。我有一个用Babylonjs编写的3D平台，它使用Konva的画布作为动态纹理。然后将纹理应用到网格上。当点击网格时，它会告诉我纹理的哪个区域(x，y)被点击了。现在，我将不得

浏览 6提问于2022-02-11得票数 0

回答已采纳

1回答

如何使用Konva绘制多种样式的文本？

konvajs

我现在正在使用KonvaJS。这是我的来呈现文本。您可以进行实时编码。

浏览 0提问于2018-08-27得票数 2

回答已采纳

5回答

使用html画布的可编辑网格

javascript、html、canvas、google-docs

最近，当我注意到在谷歌电子表格的最近一次迭代中，他们使用canvas标记呈现电子表格网格时，我感到非常惊讶，而在过去，他们使用尝试过的和真实的<table><tr><td>来呈现网格。在上一个版本中，使用虚拟行技术(类似于在中所做的操作)，在任何时间点只呈现一小部分实际行。这

浏览 4提问于2014-06-18得票数 14

回答已采纳

2回答

高质量画布drawImage - Javascript

javascript、canvas、konvajs、drawimage、2d-context-api

我使用konva.js在HTML上绘制元素。当用户在画布中完成其设计时，可以将创建导出到PDF文件中。在这种情况下，我的HTML结构如下：一个div“画布”来附加所有的画布( konva-canvasan a div "canvas0/canvas1“等等)，最后添加每个自动生成的div "konvajs-content"

浏览 3提问于2021-05-17得票数 2

回答已采纳

1回答

如何向React Konva Video Stage添加控件

reactjs、konvajs、react-konva、konva、konvajs-reactjs

嘿，我想放一段视频作为我的konva舞台。我使用了一个来自沙盒的例子，但是我想不出如何将视频播放器控件添加到it.Can中，有人帮助我谢谢 super(...args); const

浏览 27提问于2021-10-10得票数 0

1回答

用konva图像模拟<img>对象匹配/目标位置属性的最佳策略

html5-canvas、konvajs、react-konva

假设我们在画布上绘制了1000x1000图像，并将konva图像大小设置为类似于500x700。是否可以在konva中模仿html <img />标记object-fit属性，这样我们就可以告诉图像对象在cover / contain模式下匹配图像。类似地，模仿object-position也是有用的。到目前为止，我能想到的唯一方法是用矩形剪辑图像

浏览 4提问于2020-06-15得票数 2

回答已采纳

1回答

如何缩放多边形，而不需要翻译出javascript中的坐标列表？

javascript、geometry、polygon、konvajs

我有一个坐标[x1,y1, x2, y2 ....]数组，它表示html画布上的一个多边形。我正在使用KonvaJS绘制多边形。我试图检索多边形的缩放坐标，其中[x1, y1, x2, y2 ...]是缩放坐标。使用JSTS 向坐标添加缓冲区。遵循这个片段并尝试将其集成到我的react/typescript应用程序中，并创建了代码片段，如下所示，函数vectorCoordinates2JTS (多边形){ var坐标

浏览 2提问于2022-06-28得票数 0

1回答

如何使用Konva按比例将getTransform获得的矩阵应用到更大的画布上

matrix、canvas、konvajs、konva

我们的项目是一个在线DIY专辑。用户在画框中填写照片。要求Konva实现类似Photoshop的掩模功能，类似于图片按下帧的效果。我的画布上可能有很多画框，只有一个画布不能实现这个功能。因此，我需要使用一个新的画布来画这个，然后把这个面具画布的内容画到Konva的画布

浏览 14提问于2022-09-14得票数 0

1回答

KonvaJS / HTML5画布无限循环图。设置摄像机位置

javascript、html、canvas、konvajs

我试图创建一个基于主网格的无限循环画布。缩小小提琴在这里与网格在中心的视口。而最好的方法似乎是获得拖动

浏览 0提问于2018-12-05得票数 7

回答已采纳

1回答

用Konva设计甘特视图

konvajs

我正在尝试用Konva构建甘特控件(使用Konva是否有意义)？我试图在下面勾勒出这个控件：我想把Konvas的舞台分解成以下几个部分：从事件处理的角度来看，同步不同层的最佳方法是什么？例如，如果用户单击滚动条的向下箭头形状，我将需要“滚动”所有层一个单位向

浏览 1提问于2018-03-07得票数 2

回答已采纳

2回答

使用Rough.js作为Konva渲染器

javascript、canvas、konvajs

试图使用Rough.js渲染部分的konva阶段，但没有成功。Rough使用对画布的引用来绘制，但是konva层上的getCanvas()和toCanvas()似乎都做不到这一点。想法？// Combined code container: 'roughAndKonva',

浏览 0提问于2019-05-20得票数 1

回答已采纳

1回答

React自定义上下文/画布(用于canvas2svg)

reactjs、html5-canvas、konvajs、react-konva

我们使用，它呈现一个管理底层画布/上下文的组件。我们希望与它一起使用，它基本上是一个画布上下文的包装器，它跟踪到画布上的所有绘图，并为您准备访问它时维护一个svg表示。它不会修改画布api，所以理论上，Konva不会受到影响，因为它的画布绘制调用是相同的--它们只需要在canvas2svg生成的上下文上，而不是<em

浏览 16提问于2022-01-24得票数 0

回答已采纳

1回答

如何在Konva* stage的Ionic v3应用程序上显示表情符号？*

angular、ionic3、emoji、konvajs

我正在尝试使用离子v3制作类似于Instagram故事的东西，我正在使用KonvaJS进行图像处理/画布相关的事情等。我想做的是在Konva画布上添加Emoji的文本。我如何才能做到这一点？我试图将Unicode字符添加到Konva.Text的text属性中，但它们不起作用。

浏览 39提问于2019-06-18得票数 0

回答已采纳

1回答

konvajs与开层的混合模式

javascript、openlayers、konvajs

我尝试在konvajs ()和openlayers ()之间使用混合模式。我有一个用openlayers创建的地图，然后我使用openlayers的Overlay ()在地图上添加画布konvajs。我试过： property globalCompositeOperation of konvajs，但它只适用于konvajscss mix-blend-mode中的项，但是konvajs中的所有项都停

浏览 4提问于2020-09-01得票数 1

回答已采纳

1回答

在React Konva中使用WebFontLoader会导致文本偏移吗？

javascript、reactjs、webfonts、konvajs、react-konva

我正在尝试使用React Konva画布库，使用web字体在画布上绘制一些文本数据。我正在使用WebFontLoader库加载web字体。当然，在字体完全加载之前会有一个短暂的延迟。但是，一旦加载了字体，文本就会绘制在不正确的位置，并且在重新绘制之前不会进行自我更正。在字体加载完成后，创建对组件的</

浏览 19提问于2019-11-06得票数 0

回答已采纳

1回答

在KonvaJS画布中拖动/缩放高分辨率图像时的性能问题

konvajs、konva

我目前正在将一个相当大的图像(15000x10000)加载到konva画布中。画布在另一张帆布上是可拉的。如果图像的部分离开浏览器的视图，则不会绘制图像。主要的问题是，当从画布上放大时，拖曳是不平滑的，只是一点点，并且放大到图像中是相当令人眩晕的。图像从文件系统加载，转化为Blob，创建像window.URL.createObj

浏览 14提问于2022-04-20得票数 0

回答已采纳

1回答

Konva/画布背景蓝光/霜玻璃效果

canvas、html5-canvas、konvajs、konva

我正在使用Konva/画布绘制多个半透明矩形z序。目前，这看起来像下面的图片的右边。现在，我想实现一个叫做“霜玻璃效果”/“背景模糊”的东西，你可以在左边看到。这个想法是，在半透明矩形下面的矩形的重叠部分将被模糊。如何在Konva或普通帆布上做到这一点？

浏览 5提问于2021-09-18得票数 1

回答已采纳

1回答

将视频添加到konvajs舞台

javascript、html、canvas、konvajs

我有一个可以工作的web功能，它使用html5视频和画布来访问设备摄像机的mediaStream，然后在画布中拍照并呈现图像。效果很好，但我想用konvajs舞台而不是画布。密码 node:video,x: 50, i

浏览 2提问于2015-11-04得票数 0

回答已采纳

点击加载更多