问题标签 [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.
objective-c - 用 CGContextDrawImage 绘制 NSImage 太模糊
我使用 CGContextDrawImage 绘制我的设计图像,但它太模糊了。
请帮助我提高它的质量。
我用这个来画画:
//NSImage* design_image
两种尺寸都相同,我用它来插值
c# - 通过绘图上下文将 wpf 文本块光栅化为位图
我的程序是 MS paint 和 Pickpick 的一种复制版本。并且功能之一是栅格化所选对象,例如文本块或形状。
关于可选对象,为了调整大小和与装饰器一起移动,它有 1 个 ContentControl,包括 1 个文本块 + 1 个形状。
转换为使用绘图上下文绘制形状而不是在 Canvas 上渲染并不难。
但是,在使用绘图上下文绘制 Textblock 时,我参考了下面的链接来计算 Textblock
与 DrawingContext.DrawText 垂直对齐
的位置,
但问题是当 Textblock 有多行或换行时。
我的程序截图
此外,文本块由 ContentControl 包装,因此根据用户更改文本块的属性,它会有很大的不同。我想似乎不可能转换每个变量。所以,我正在考虑其他的绘画方式。
- 使用 GDI+ 进行绘制,而不是使用绘图上下文进行绘制。(仍不确定)
- 在用户编辑文本时使用绘图上下文。(所以在光栅化之前它会是一样的,反之亦然)
- 有什么方法可以直接将文本块转换/捕获为图像或几何图形?(如果可能的话,这将是最好的方法。)例如,要获得应用了着色器效果的图像源,我确实喜欢这样做。所以..可能有办法。 如何获得效果应用源的对象
也可以从http://ngwin.com/picpick
参考这个程序
picpick 截图
有更好的想法吗?先感谢您。
javascript - 将 eventlistner 添加到 html 绘图
所以我需要一些快速帮助,下面是我的简单html绘图代码,你可以看到屏幕加载drawgs时自动启动,而不是我想添加一个事件监听器,当用户点击屏幕动画将开始,当他再次单击时它将停止,等等我得到了逻辑,但我无法正确实现语法,所以我在代码片段下面添加了供大家查看。任何形式的建议或帮助将不胜感激!
wpf - WPF 绘图图像会留下意外的空像素线
我正在尝试将 WPF 中的多个图像渲染到画布上。在下面的人为示例中,我能够使用以下代码重现意外行为:
这将产生以下绘图: 用细线绘图。如您所见,在两个矩形之间有一条细(可能是一个像素)宽的线。我期待一个绘图,两个矩形都接触。
所以我的问题是: 为什么 WPF 不将图像渲染为感人?
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 像素宽的黑线放大 8 倍后的样子。第二行显示了 WPF 绘制的线:
如您所知,它们中没有一个正好是 1 像素宽,因此它们都不是真正的黑色!
如果上面提到的文章是正确的,那么至少其中一行应该正确显示。原因:96 DPI和120 DPI相差1/5。这意味着每 5 个 LU 像素应该从与监视器像素完全相同的位置开始。偏移量应该是 1/2 LU,这就是为什么我做了 10 1/10 步。
有关使用该文章中推荐的指南的其他示例,请参见下文。正如那篇文章中所写,如果使用指南或使用偏移量并没有什么不同。
问题
请提供在120 DPI 显示器上真正绘制 1 像素宽的线的代码。我知道,stackoverflow 上已经有很多答案解释了理论上应该如何解决。另请注意,代码必须在OnRender
usingdrawingContext.DrawLine()
而不是 using 中运行Visual
,后者具有SnapToDevicePixels
解决问题的属性。
致所有急于将问题标记为重复的人
我知道重复的问题对 stackoverflow 不利。但通常一个问题会被标记为重复,这实际上是不同的,这会阻止问题被讨论。因此,如果您认为已经有答案,请写下评论并给我一个检查的机会。然后我将运行该代码并放大它。只有这样才能判断它是否真的有效。
我已经尝试过的事情
我已经花了一周的时间尝试各种变化来获得线条。没有人给出黑色 1 监视器像素线。所有都是灰色的,宽度超过 1 个像素。
使用视觉选项
Clemens 建议使用RenderOptions.EdgeMode="Aliased"
和/或SnapsToDevicePixels="True"
. 这是没有选项或任何选项组合的结果:
它似乎SnapsToDevicePixels
没有效果,但SetEdgeMode
前 3 个破折号比后面的 7 个破折号高 1 个像素,这意味着锯齿似乎会按需要发生,但线条仍然是 2 甚至 3 个像素宽,并且不是正确的黑色。
使用指南
我画的第一条线paint.net
作为参考,一条正确的线应该是什么样子。这是生成行的代码:
wpf - WPF:使用 DrawingContext 的贝塞尔曲线
我想使用 DrawingContext 类绘制贝塞尔曲线,如下所示:
我的 _blackPen 初始化如下:
但我得到了这个结果:
但我想要的是类似于此链接中显示的内容。
那么我错过了什么?
编辑:
当我设置pathFigure.IsFilled = false;
路径消失:
这同样适用于drawingContext.DrawGeometry(null, _blackPen, path);
wpf - WPF:绘图上下文分辨率
我正在使用DrawingContext
类来绘制条形图,但生成的标签和刻度是模糊的:
在代码中,我使用了一个BarRenderer
派生自FrameworkElement
. 每个条都由一个BarRenderer
实例表示,我通过覆盖该OnRender
方法进行绘图。每个“条”都有一个label
和一个下面的文本并value
定义条的高度。而负责绘制label和tick的逻辑如下:label
value
我怀疑问题出在旋转变换上,因为当标签没有被变换时,它们不再像以前那样模糊:
但可以看出,一些蜱比其他蜱更暗。那么我做错了什么?
编辑:
我已经设置SnapsToDevicePixels
为true
,当我设置为时RenderOptions.SetEdgeMode
,Aliased
一些刻度消失并且文字仍然模糊:
编辑 2:更多代码
wpf - 如何以编程方式调整 DrawingVisual 的大小?
所以,我是 WPF 绘图的新手。出于性能原因,我不得不从 ContentControl 和 UserControl 等常规控件切换到更轻量级的元素,例如 DrawingVisual。我正在开发一个图表应用程序,它可能在画布上最多有 1000 个元素,可以拖动、调整大小等。首先,使用 DrawingVisual 代替 Shape 更好吗?其次,我的主要问题在这里。我正在向 Canvas 添加 DrawingVisual 元素,如下所示:
在画布内:
如何通过代码动态增加 Rectangle 的大小?我尝试设置 Rectangle 的高度和宽度,但它不起作用,使用了 ScaleTransform,但这可能不是我想要的。我需要重新绘制矩形吗?谢谢!