标签: vector-graphics

我正在 paper.js 中开发一个项目，我需要根据另外两个路径的交集、差异和并集创建新路径。我做了一些挖掘，发现了插入三次贝塞尔样条的数学函数，但我想知道是否有任何 javascript 库可以执行类似 svg 的向量算术。如果有的话，我会复制 inkscape 并将其转换为 JavaScript，但你永远不知道。无论如何，三次贝塞尔曲线插值的数学函数如下：

Pointx = (Ax * percent^3) + (Bx * 3 * (percent^2 * (1-percent))) + (Cx * 3 * (percent * (1-percent)^2)) + (Dx * (1-percent)^3)
Pointy = (Ay * percent^3) + (By * 3 * (percent^2 * (1-percent))) + (Cy * 3 * (percent * (1-percent)^2)) + (Dy * (1-percent)^3)

其中 A、B、C 和 D 是曲线的点。A 是起点，D 是终点，B 和 C 是操纵 A 和 D 之间曲率的“控制点”。 是percent沿着曲线计算的距离，范围从 0 到 1。 …

我正在使用 R 以及 Misc3d 和 rpanel 库，在 webGL 中创建 3D 图像。然后我需要通过 Latex 将图像嵌入到 PDF 中。

3D 图像渲染良好并且看起来很棒 - 但我想我需要将 webGL HTML 文件转换为 SVG 或其他可以嵌入Latex 中的矢量图形文件。

关于如何实现这一目标有什么建议吗？

对于一个简单的矢量绘图应用程序，我希望实现一个“选择框”，它是节点布局边界的图形表示。

例子：

感谢Jewelsea和他的BoundsExample，我现在对如何获取盒子的数据有了很好的了解。我正在努力解决的部分实际上是在场景上绘制盒子，以正确尊重节点上的转换的方式。

在这种情况下，正确意味着边界逻辑大小随节点缩放，但选择框的笔划保持不变。这意味着选择框随其相应的节点缩放，但笔画保持未缩放。

我可以想到实现这样一个选择框的两种通用策略。

1. 作为我的自定义节点的属性 选择框可以是我的自定义节点的内部详细信息，其可见性绑定到节点的选定状态。在这种情况下，如果可能的话，我需要找到一种方法让节点忽略父级转换。

2. 在透明窗格上的缩放节点顶部绘制选择框在这种情况下，在将节点的转换应用到其边界之后，我会将选择框绑定到缩放节点的布局边界。这在 JFX 中似乎不会发生（即使对于“boundsInParent”），因为您可以通过对第 122 行中的“group”应用一些缩放来快速测试示例。

带缩放的修改示例：

package application;

import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.ReadOnlyObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.scene.Cursor;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Control;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape; …

X问题：

我想在 WPF 中使用矢量图形。

我有一堆 SVG 文件，可以使用 Inkscape 将其转换为 XAML。生成的 xamlResourceDictionary包含ViewBox/Canvas等Path。字典被合并到其中App.xaml，我可以使用 key 来访问它们。

问题：如何使用此类图像？看来我没有正确使用它们。

这是我如何使用它们

<Viewbox Child="{StaticResource MyImageResourceKey}" Width="100" Height="100"/>

但看起来我只能使用一次（在一个地方）！尝试同时在多个位置使用该图像将把它从以前的位置删除或抛出

System.ArgumentException：在附加到新的父 Visual 之前，必须断开指定的子 Visual 与当前父 Visual 的连接。

Y问题

我想显示矢量图像列表。我这样显示它们

<ItemsControl ItemsSource="{Binding Images}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Viewbox Width="100" Height="100">
                <ContentPresenter Content="{Binding Image}"/>
            </Viewbox>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl> 

视图模型

public class ViewModelSomeWindow : INotifyPropertyChanged
{
    public class MyImage
    {
        public object Image { get; set; }
    }

    private …

我正在考虑在我的应用程序中实现矢量图形，但我担心性能，因为矢量图形比（相比之下）静态位图花费更多时间来渲染自身似乎很自然。

我应该担心这个因素，还是 Android 的行为方式没有显示出真正的差异？

我有路径集 A 和路径集 B。我试图找到一种算法来比较两个路径集的相似性。

路径特性：

1. 路径集是一条或多条线，每条线有两个或多个点。不必连接线路。
2. 路径集可能会自身重叠（即 X）。
3. 路径集可能包含不同数量的顶点（即一条路径可能看起来与另一条相似，但其中包含更多点）。
4. 不能保证点对于两个路径集都是有序的。

应该考虑比例，即一个小的 X 应该匹配一个大的 X。对于任何路径都不需要考虑平移，因为任何路径的最底部点的 y 将为 0，任何路径的最左边点将x 为 0。

是否有最佳实践或众所周知的算法（我在 Google 搜索中几乎没有发现）来比较这些类型的路径集的相似性？

我可以以编程方式更改矢量可绘制对象的颜色，但我想将笔触应用于矢量可绘制对象。我需要一种在运行时更改矢量可绘制笔划的方法：

以前我使用过这种方法，但在我的情况下失败了。

我将 Vector drawable 转换为位图，然后使用此函数应用边框，但它全部用黑色填充，未应用笔划。

  private static Bitmap getBitmap(VectorDrawable vectorDrawable)
    {
        Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
        vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        vectorDrawable.draw(canvas);
        return bitmap;
    }
    private static Bitmap getBitmap(Context context, int drawableId)
    {

        Drawable drawable = ContextCompat.getDrawable(context, drawableId);
        if (drawable instanceof BitmapDrawable)
        {
            return ((BitmapDrawable) drawable).getBitmap();
        }
        else if (drawable instanceof VectorDrawable)
        {
            return getBitmap((VectorDrawable) drawable);
        }
        else
        {
            throw new IllegalArgumentException("unsupported drawable type");
        }
    }
private Bitmap addWhiteBorder(Bitmap bmp, int borderSize)
    {
        Bitmap …

我需要一个 bash 脚本，它从 pdf 中提取所有光栅和矢量图像并将它们转换为 jpg 格式。

我查看了网络上的许多帖子，从中获得了大部分想法
如何从 PDF 文件中提取图像？
计算pdf中光栅图像的数量
如何从pdf中提取矢量图？

它有效，我分享它，因为我没有在网上找到这样的解决方案。

但是有 2 个小问题目前我无法解决。

1. 如果有一个带有文本的页面，pdf2svg则将文本确定为矢量图像，并将生成带有文本的额外图像。 有什么办法可以区分文本和真实的矢量图吗？
2. 如果一页上有多个矢量图像，pdf2svg则将生成一个包含所有矢量图像的 SVG 图像（就像页面包含文本一样）。是否可以将它们提取为分离的图像？

bash 脚本

#!/bin/bash

TMP_DIR=$1
SOURCE_PDF=$2
MAX_WIDTH=1920
MAX_HEIGHT=1080

echo "source: $SOURCE_PDF"


function burst
{
    local source=$1

    # explodes the pages to pdf files (it is necessary for the vector images export)
    `/usr/bin/pdftk $source burst`

    # removes the source pdf (we do not need it any more)
    `rm $source`

    # and the txt files which …

Windows 10 中的新放大镜通过选中“启用位图平滑”创建非常有趣的结果。

这里使用的算法的名称是什么？我怎样才能取得这些令人印象深刻的结果？这个放大镜生成的矢量几乎完美到足以制作矢量 OTF 字体！我所知道的每种位图跟踪方法都不适用于像素艺术或像素字体。

与 Adob​​e Illustrator 专有位图追踪算法的比较：

假设通过 R 库networkD3生成网络图。进一步假设您可以将该网络图保存为外部独立 HTML 文件（请参阅输出部分），或者通过 R 库htmlwidgets呈现它。

您是否有任何方法可以将生成的网络导出为矢量图形（pdf 或 svg），无论是在 R 内部还是外部？

注意：我知道 D3.js 库的主要目的不是生成静态数据可视化，但肯定有一种方法可以使用/转换 D3 网络图进行印刷出版。

编辑 1：按照CJ Yetman 的建议，我通过 Firefox Developer Edition 检查了 HTML 文件的 DOM 属性。使用此方法，可以具体查看 SVG 属性（请参阅此示例），但它们大多是空的。但是，如何如 CJ Yetman 所示“从 DOM 中提取 SVG”？