标签: path-2d

我构造了一个Path2D代表由直线组成的未闭合形状:

我想能够检测何时单击鼠标并且鼠标指针接近路径(在几个像素内).使用该contains方法不起作用,因为算法将未闭合的形状视为隐式闭合(即通过在起点和终点之间绘制一条直线).

有谁知道实现这个的另一种机制？

我在单个画布中有多个 Path2D，我希望能够独立缩放和定位它们，而不是调整 context.scale() 和 context.translate()。我使用 SVG 路径数据构建每个 path2D 对象，因为我希望能够修改笔划破折号和笔划长度。

看来我可能无法使用 Path2D 来实现这一目标，解决这个问题的最佳方法是什么？

我正在考虑一些潜在的选择：

1. 将drawImage方法与svg源一起使用
2. 将 svg 路径数据转换为画布路径弧（可能使用库）
3. 调整实际的 svg 路径数据并为每次绘制重建 Path2D 对象

编辑：

我构建了这个代码笔，我试图将 p1 移向 p2 而不改变 p2 的位置。当我翻译上下文时，两个对象都会移动。仅调整 p1 位置的最佳方法是什么？

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p1x = 0
var p1 = new Path2D("M1 0 h 100 v 50 h -100 Z");
var p2 = new Path2D("M200 0 h 50 v 25 h -50 Z");

setInterval(() => {
  p1x = p1x + 1
  ctx.translate(0, 0) …

我正在画布上绘制一个 path2D SVG 形状。问题是使用 SVG 数据时 moveTo 函数似乎不起作用。

此 codepen 中说明了该问题。 https://codepen.io/grasmachien/pen/rNaJeBN

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
p.moveTo(100,100)
ctx.fill(p);

有没有办法在不移动画布的情况下移动路径？

我想检查 Path2D 对象的各个路径段。例如，假设

path = new Path2D();
path.ellipse(70,90,2,2,0,0,2*Math.PI);

我想传递path给其他函数并提取 的元素，Path2D以便它们可以转换为另一种格式。总体目标是允许用户创建路径并将其转换为 TikZ 以包含在 LaTeX 文档中。

是否有像 Java 那样的东西Shape.getPathIterator()，它允许人们检查路径上的每个段。JavaScript 可以做到这一点吗？作为模板，这里是 Java 代码的概要，它可以完成我希望在 Javascript 中完成的任务。

PathIterator p = path.getPathIterator(new AffineTransform());
while (p.isDone() == false)
  {
    double c = new double[6];
    int t = p.currentSegment(c);
    if (t == PathIterator.SEG_MOVETO)
      // (c[0],c[1]) is the "move-to" point.
    else if (t == PathIterator.SEG_LINETO)
      // (c[0],c[1]) is the "line-to" point.
    else if (t == == PathIterator.SEG_CUBICTO)
      // c[0] through c[5] specify the …

我试图使用带有path2d的多个顶点绘制任何类型的多边形形状,我想稍后使用java.awt.geom.Area查看确定点是否在其区域内

public static boolean is insideRegion(Region region, Coordinate coord){
Geopoint lastGeopoint = null;
        GeoPoint firstGeopoint = null;
        final Path2D boundary = new Path2D.Double();
        for(GeoPoint geoponto : region.getGeoPoints()){
            if(firstGeopoint == null) firstGeopoint = geoponto;
            if(lastGeopoint != null){
                boundary.moveTo(lastGeopoint.getLatitude(),lastGeopoint.getLongitude());                
                boundary.lineTo(geoponto.getLatitude(),geoponto.getLongitude());                
            }
            lastGeopoint = geoponto;
        }
        boundary.moveTo(lastGeopoint.getLatitude(),lastGeopoint.getLongitude());                
        boundary.lineTo(firstGeopoint.getLatitude(),firstGeopoint.getLongitude());

        final Area area = new Area(boundary);
        Point2D point = new Point2D.Double(coord.getLatitude(),coord.getLongitude());
        if (area.contains(point)) {
            return true;
        }
return false
}

我想在TypeScript项目中使用新的Path2D api,但我没有在lib.es6.d.ts中看到它.使用它的最佳方法是什么？有没有人有Path.D的d.ts文件？

我开始用java编写游戏.我有Enemys和一个玩家,一个基本的2D游戏,这是第一次获得经验.

现在我想让Enemys走一条路,我可以把它画进一个"关卡编辑器".我有一个JPanel,一个mouseMoveListener,然后单击Path2D开始将mouseMove点保存到Path2D.Double对象.

之后,我实现了以下方法来使enemys遵循这条路径:

public void forward(){
    if(!pathIterator.isDone()){
        pathIterator.currentSegment(current);
        x = current[0];
        y = current[1];
        pathIterator.next();
    }
    else {
        dead = true;
    }
}

我认为它清楚现在发生了什么:敌人跟随,但速度是我移动鼠标.因此,如果我快速移动鼠标,敌人只会......从一个点"跳跃"到另一个点.慢下来,它"偷偷摸摸"了这一点.(因为我不是机器人,我不能以相同的速度移动鼠标^^)

谈论机器人:是的,我可以让一个awt.Robot移动我的鼠标.但这也不可能,因为我必须绘制复杂的路径,这些路径没有任何可见的数学背后.

所以,我想让这个Enemys以相同的速度在这条路上前进.我的问题:我不知道在哪里实施"修复".我有2个想法:

• 也许我可以在路径创建上工作:不仅可以将点添加到Path2D,也许我可以计算我移动到快速的点之间的点,或者删除彼此靠近的点.但是:首先,我不知道如何计算这个,(有没有数学逻辑来实现这个？)第二,当我这样做时,我可能无法改变敌人游戏的速度,那会很糟糕的

• 我的第二个想法是计算(跳过点之外的点)之间的点,这应该发生在每一帧,相对于实际速度.但是在这里我没有足够的数学经验.

那么,这种方式是否可能,如果是的话,有人知道如何计算这个吗？而且,如果没有,我有什么其他可能性来实现这一目标？

谢谢你,对不起英语不好意思!