问题标签 [drawingcontext]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
314 浏览

objective-c - 用 CGContextDrawImage 绘制 NSImage 太模糊

我使用 CGContextDrawImage 绘制我的设计图像,但它太模糊了。

请帮助我提高它的质量。

我用这个来画画:

//NSImage* design_image

两种尺寸都相同,我用它来插值

0 投票
1 回答
750 浏览

c# - 通过绘图上下文将 wpf 文本块光栅化为位图

我的程序是 MS paint 和 Pickpick 的一种复制版本。并且功能之一是栅格化所选对象,例如文本块或形状。

关于可选对象,为了调整大小和与装饰器一起移动,它有 1 个 ContentControl,包括 1 个文本块 + 1 个形状。

像这样

转换为使用绘图上下文绘制形状而不是在 Canvas 上渲染并不难。

但是,在使用绘图上下文绘制 Textblock 时,我参考了下面的链接来计算 Textblock 与 DrawingContext.DrawText 垂直对齐
的位置, 但问题是当 Textblock 有多行或换行时。
我的程序截图 在此处输入图像描述

此外,文本块由 ContentControl 包装,因此根据用户更改文本块的属性,它会有很大的不同。我想似乎不可能转换每个变量。所以,我正在考虑其他的绘画方式。

  1. 使用 GDI+ 进行绘制,而不是使用绘图上下文进行绘制。(仍不确定)
  2. 在用户编辑文本时使用绘图上下文。(所以在光栅化之前它会是一样的,反之亦然)
  3. 有什么方法可以直接将文本块转换/捕获为图像或几何图形?(如果可能的话,这将是最好的方法。)例如,要获得应用了着色器效果的图像源,我确实喜欢这样做。所以..可能有办法。 如何获得效果应用源的对象

也可以从http://ngwin.com/picpick 参考这个程序
picpick 截图 在此处输入图像描述

有更好的想法吗?先感谢您。

0 投票
1 回答
92 浏览

mobile - 在 Flutter 中,Listview 的内容被绘制在下面的 UI 元素上

有人可以帮我解决以下问题吗?我不确定这是错误还是预期行为。我有以下布局:

滚动非常非常快会使我的 ListView 的内容被绘制在另一个容器中的 Row 上?这可能是 Flutters 绘图引擎中的一个错误,还是我错过了为我的 ListView 设置一些边界?


正常/预期布局:

在此处输入图像描述


快速滚动后:

在此处输入图像描述

0 投票
1 回答
39 浏览

javascript - 将 eventlistner 添加到 html 绘图

所以我需要一些快速帮助,下面是我的简单html绘图代码,你可以看到屏幕加载drawgs时自动启动,而不是我想添加一个事件监听器,当用户点击屏幕动画将开始,当他再次单击时它将停止,等等我得到了逻辑,但我无法正确实现语法,所以我在代码片段下面添加了供大家查看。任何形式的建议或帮助将不胜感激!

0 投票
0 回答
38 浏览

wpf - WPF 绘图图像会留下意外的空像素线

我正在尝试将 WPF 中的多个图像渲染到画布上。在下面的人为示例中,我能够使用以下代码重现意外行为:

这将产生以下绘图: 用细线绘图。如您所见,在两个矩形之间有一条细(可能是一个像素)宽的线。我期待一个绘图,两个矩形都接触。

所以我的问题是: 为什么 WPF 不将图像渲染为感人?

0 投票
1 回答
569 浏览

c# - 如何使用 OnRender 中的 drawingContext 绘制精确的 1 个监视器像素线以获得 120 DPI 分辨率?

我只是无法在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 像素线,第二行:WPF 线

第一行显示了完美的 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作为参考,一条正确的线应该是什么样子。这是生成行的代码:

0 投票
1 回答
302 浏览

wpf - WPF:使用 DrawingContext 的贝塞尔曲线

我想使用 DrawingContext 类绘制贝塞尔曲线,如下所示:

我的 _blackPen 初始化如下:

但我得到了这个结果:

在此处输入图像描述

但我想要的是类似于此链接中显示的内容。

那么我错过了什么?

编辑:

当我设置pathFigure.IsFilled = false;路径消失:

在此处输入图像描述

这同样适用于drawingContext.DrawGeometry(null, _blackPen, path);

0 投票
0 回答
161 浏览

wpf - WPF:绘图上下文分辨率

我正在使用DrawingContext类来绘制条形图,但生成的标签和刻度是模糊的:

在此处输入图像描述

在代码中,我使用了一个BarRenderer派生自FrameworkElement. 每个条都由一个BarRenderer实例表示,我通过覆盖该OnRender方法进行绘图。每个“条”都有一个label和一个下面的文本并value定义条的高度。而负责绘制label和tick的逻辑如下:labelvalue

我怀疑问题出在旋转变换上,因为当标签没有被变换时,它们不再像以前那样模糊:

在此处输入图像描述

但可以看出,一些蜱比其他蜱更暗。那么我做错了什么?

编辑:

我已经设置SnapsToDevicePixelstrue,当我设置为时RenderOptions.SetEdgeModeAliased一些刻度消失并且文字仍然模糊:

在此处输入图像描述

编辑 2:更多代码

0 投票
1 回答
135 浏览

wpf - 如何以编程方式调整 DrawingVisual 的大小?

所以,我是 WPF 绘图的新手。出于性能原因,我不得不从 ContentControl 和 UserControl 等常规控件切换到更轻量级的元素,例如 DrawingVisual。我正在开发一个图表应用程序,它可能在画布上最多有 1000 个元素,可以拖动、调整大小等。首先,使用 DrawingVisual 代替 Shape 更好吗?其次,我的主要问题在这里。我正在向 Canvas 添加 DrawingVisual 元素,如下所示:

在画布内:

如何通过代码动态增加 Rectangle 的大小?我尝试设置 Rectangle 的高度和宽度,但它不起作用,使用了 ScaleTransform,但这可能不是我想要的。我需要重新绘制矩形吗?谢谢!

0 投票
1 回答
50 浏览

swift - 如何使用手势在 UIImageView 上绘制表情符号

希望大家在这次疫情中都平安。

我一直在尝试设计一个类似于 SnapChat 的应用程序,自从一周以来我一直陷入一个问题,我没有从 gitHub 获得任何库或从 stackOverFlow 获得任何代码参考。我必须在使用UIGraphicsGetCurrentContext()的 UIImageView 上使用滑动手势绘制各种表情符号线 我面临的问题是管理表情符号之间的相等空间。我附上我到目前为止完成的工作的屏幕截图。任何帮助,将不胜感激。提前致谢

在此处输入图像描述