我的目标是创建一个脚本，最初显示一个空白的绘图图。如果用户点击一个闪亮的动作按钮说“添加点”，那么点将通过 htmlWidgets 的 onRender() 函数添加到绘图图中。这将是有效的，因为当用户选择 Shiny actionButton 时，不需要重新绘制背景空白绘图图。

但是，为了让我实现这一点，我需要找到一种方法将 Shiny actionButton 中的更改直接指示到 onRender() 函数中，以便空白的绘图图（在下面的代码中称为“pP”）会根本不会被改变。我在下面的 onRender() 代码中添加了两条注释行作为 if 语句，以显示我的目标。

我知道有一个名为 Shiny.onInputChange('variable', variable) 的函数可以在 onRender() 函数内部调用，以保存在 onRender() 内部创建的变量，以便可以像在外部的 Shiny 输入一样使用它onRender() 函数。所以，我想我正在寻找相反的东西（将闪亮的输入值直接传输到 onRender() 函数中）。

注意：这类似于我之前提出的问题（在 htmlWidgets 的 onRender() 函数中使用 Shiny actionButton() 函数）。但是，我简化了问题，并希望确定是否有一个简单的答案可用。

我有一个有两个情节的闪亮应用程序。如果用户单击顶部图中的一个点，该点的 x 和 y 坐标将保存到一个响应式 Shiny 变量（在下面的代码中，它称为 pointSel）。

在底部图中，我希望将此 pointSel 的 x 和 y 坐标绘制为绿点。我目前有这个工作（如下面的脚本所示）。但是，每次更新 pointSel 对象时，都会重新绘制第二个图。相反，我试图保持第二个绘图背景不被绘制，并简单地在它上面覆盖一个新的绿点。

我相信这需要两件事：

1）onRender()函数中应用于“data = pointSel()”的isolate()函数。

2) 如果 pointSel 已更新，一些语法会提醒仅添加绿点跟踪。我在注释“$('#pointSel').on('click',function()”中给出了暂定语法。

下面是我的代码：

注意：这与我之前发布的问题类似，并且有一个有用的答案（htmlWidgets 的 onRender() 函数中的 Shiny actionButton() 输出）。我遇到了这个问题的变体（无法将绘图的各个方面覆盖到 onRender() 函数中的背景图），而当前的帖子只是该问题的另一个变体。我正在尝试为这种情况找到类似的答案！谢谢你的任何建议。

我正在尝试创建一个闪亮的应用程序来探索具有 4 个变量/列（A、B、C、D）和 10,000 行的数据框。有一个输入字段，用户必须在其中选择 4 个变量/列中的 2 个。一旦他们这样做了，就会在右侧显示一个散点图。散点图是一个带有六边形分箱的 Plotly 对象，汇总了两个用户选择的变量/列之间的 10,000 行的值。

此时，用户可以选择“Go！” 按钮，这会导致与这 2 个变量/列的第一行相对应的橙色点叠加​​到 Plotly 对象上。用户可以依次选择“Go！” 然后将第二、三、四等行对应的橙色圆点叠加到 Plotly 对象上。行 ID 的名称在散点图矩阵上方输出。

在大多数情况下，该应用程序正在运行。我要改进的只有两件事：

1）我希望用户能够在输入字段中选择新对。这在大多数情况下都有效。但是，在一种特定情况下，这会导致应用程序突然关闭。它发生在橙色点覆盖到散点图上之后。如果用户随后删除了这两个输入对，则应用程序会突然关闭。我希望用户能够擦除两个输入对值并输入两个新的对值而无需关闭应用程序，即使在橙色点被绘制到散点图之后也是如此。

2）我注意到行 ID 的输出在绘制橙色点之后有些滞后。我想知道为什么会发生这种情况，因为我在脚本中绘制橙色点之前输出了行 ID。我希望有更少的延迟，但我不确定如何解决这个问题。

任何有关如何解决这两个问题的建议将不胜感激！我的 MWE 显示此问题如下。

我正在尝试绘制一个空白图，将其从 htmlWidgets 输入 onRender()，并在 onRender() 函数中添加许多行。在下面的代码中，我使用了一个包含 100 行（100 行）的数据集，当我运行应用程序时，大约一秒钟内就会在 onRender() 中绘制 100 行。但是，当我将数据集更改为具有 2000 行时，需要十秒钟才能将它们全部绘制出来。

我试图为 50,000 到 100,000 行的数据集实现这一点。由于当前代码的缓慢，这显然是有问题的！

我目前实现该功能的方式是：

1. 在 R 中创建一个名为 pcpDat 的数据框。它有 100 行和 6 列的数值数据。
2. 在 R 中创建一个名为 p 的空白图
3. 将数据框 pcpDat 和绘图 p 输入 onRender()
4. 在 onRender() 中：我有一个 xArr 对象，它只包含值 0、1、2、3、4、5。对于数据帧的每一行，我将其 6 个值重构为一个名为 yArr 的数字向量。然后，对于数据的每一行，我创建一个 Plotly 跟踪对象，其中包含要绘制的 6 个 x 和 6 个 y 值的 xArr 和 yArr。然后，此 Plotly 跟踪对象为原始数据框的每一行创建一条橙色线。

绘制这么多行似乎很愚蠢！我的理由是我试图最终添加功能，以便用户可以使用 Plotly 选择绘图上的一个区域并仅查看拦截该区域的线（其余的线将被删除）。这就是为什么我希望这些线条是“交互式的”。

这一切让我思考了几个问题：

1. 我对 JavaScript 没有经验（这是 onRender() 函数的关键）。我想知道是否有可能期望快速绘制 50,000 到 100,000 条线（比如说 5 秒内）？
2. 如果 (1) 的答案应该是可能的，我正在就如何“加快”下面的代码片段寻求建议。如果没有太多的 JavaScript 技能，我很难确定什么是最耗时的。我可能无法有效地重建这些数据。

我渴望听到有关此主题的任何建议或意见。谢谢！

编辑：为了展示我正在尝试做的事情，我包含了 3 张图片。它们显示了一个示例，其中数据中有 10 行（行）。第一个图像是用户首先看到的（所有 10 行都存在）。然后，用户可以使用“框选”工具来创建一个矩形（灰色）。对于它包含的所有 x 值，留在矩形内的任何线都将保留。在此示例的第二张图像中，剩余 5 行。之后，用户可以创建另一个矩形（灰色）。同样，对于它包含的所有 x 值，保留在矩形内的任何行都将保留。在此示例的第三张图像中，现在只剩下 1 行。这 3 个屏幕截图来自我的功能代码。所以，我确实有一个原型工作。但是，当我添加数千行时，它太慢了。

我正在使用 html2canvas 和 Canvas2Image 来在我的屏幕上获取地图的屏幕截图。该功能在单击按钮时运行，如下所示：

我想要的是在进程运行时有一个加载标志。单击按钮时启动“加载图像”很容易，但我还没有弄清楚如何停止它。例如，在 Ajax 中，有beforeSend和afterSend。在这种情况下有什么等价的吗？

I'm learning extjs as our application uses it. Right now I've been able to build something like:

In the above code, when the field is tabbed in and out and is empty, it shows the message box. Instead I want that when the page is loaded, very then the message box should be displayed. How can that be done??

我只是无法在DPI 为 120 的笔记本电脑显示器上绘制单个像素宽的黑色（！）线。多年来我一直面临这个问题，我在 stackoverflow 上阅读了很多答案，但我根本无法OnRender得到drawingContext.DrawLine()工作代码。许多答案链接到这篇文章：wpftutorial.net: Draw On Physical Device Pixels。它建议使用指南并将它们偏移半个像素，即设置 y=10.5 而不是 96 DPI 监视器所需的位置 10。但它没有解释如何针对不同的 DPI 进行计算。

WPF 使用 1/96 英寸宽的逻辑单元 (LU)，这意味着 drawingContext.DrawLine(Width: 1) 想要绘制一条 1/96 英寸宽的线。我的显示器的像素是 1/120 英寸宽。

文章只说 120 DPI 的线宽不应该是 1 LU，而是 0.8 LU，也就是 1/120 英寸，我的显示器一个像素的宽度。

因此偏移量应该是 0.4 而不是 0.5 吗？这使得整个坐标计算非常复杂。假设我想在 5 LU 上画一条线，即 0.0520 英寸处的 5/96 英寸。最近的监视器像素是 0.05 英寸的 6 号。这意味着校正需要为 0.25 LU。但如果我想在 6 LU 处画一条线，偏移量需要为 0.5。

我可以立即看到的一个问题是，我的代码无法确定坐标 0、0 是否精确地位于真实的监视器像素上。如果父控件将我的控件放在奇数个 LU 上，那么 0,0 将不会与监视器像素精确对齐，这意味着我没有机会计算特定 LU 的偏移量应该是多少。

所以我想，这到底是怎么回事，我只是尝试画 10 条线，每条线的 y 增加 0.1。结果（第二行）如下所示：

第一行显示了完美的 1 像素宽的黑线放大 8 倍后的样子。第二行显示了 WPF 绘制的线：

如您所知，它们中没有一个正好是 1 像素宽，因此它们都不是真正的黑色！

如果上面提到的文章是正确的，那么至少其中一行应该正确显示。原因：96 DPI和120 DPI相差1/5。这意味着每 5 个 LU 像素应该从与监视器像素完全相同的位置开始。偏移量应该是 1/2 LU，这就是为什么我做了 10 1/10 步。

有关使用该文章中推荐的指南的其他示例，请参见下文。正如那篇文章中所写，如果使用指南或使用偏移量并没有什么不同。

问题

请提供在120 DPI 显示器上真正绘制 1 像素宽的线的代码。我知道，stackoverflow 上已经有很多答案解释了理论上应该如何解决。另请注意，代码必须在OnRenderusingdrawingContext.DrawLine()而不是 using 中运行Visual，后者具有SnapToDevicePixels解决问题的属性。

致所有急于将问题标记为重复的人

我知道重复的问题对 stackoverflow 不利。但通常一个问题会被标记为重复，这实际上是不同的，这会阻止问题被讨论。因此，如果您认为已经有答案，请写下评论并给我一个检查的机会。然后我将运行该代码并放大它。只有这样才能判断它是否真的有效。

我已经尝试过的事情

我已经花了一周的时间尝试各种变化来获得线条。没有人给出黑色 1 监视器像素线。所有都是灰色的，宽度超过 1 个像素。

使用视觉选项

Clemens 建议使用RenderOptions.EdgeMode="Aliased"和/或SnapsToDevicePixels="True". 这是没有选项或任何选项组合的结果：

它似乎SnapsToDevicePixels没有效果，但SetEdgeMode前 3 个破折号比后面的 7 个破折号高 1 个像素，这意味着锯齿似乎会按需要发生，但线条仍然是 2 甚至 3 个像素宽，并且不是正确的黑色。

使用指南

我画的第一条线paint.net作为参考，一条正确的线应该是什么样子。这是生成行的代码：

我正在尝试使用 React 分析器，但它仅在我的 onRender 方法是这样时才有效。

<Profiler id="BrowseCategories" onRender={console.log('hi')} }></Profiler>

当我这样做时它不会记录任何内容

<Profiler id="BrowseCategories" onRender={callback} }></Profiler>

这是我的回调函数