fabric.js 获取移动后的Polyline点位坐标

要获取移动后的Polyline的点位坐标，可以使用以下代码：

// 获取Polyline对象
var polyline = canvas.getActiveObject();

// 获取移动前的点位坐标
var oldPoints = polyline.get('points');

// 移动Polyline对象
polyline.set({
  left: polyline.left + 10, // x轴移动10个单位
  top: polyline.top + 10 // y轴移动10个单位
});

// 获取移动后的点位坐标
var newPoints = polyline.get('points');

在这段代码中，我们首先获取Polyline对象，然后使用`get()`方法获取移动前的点位坐标。接下来，我们移动Polyline对象，然后再次使用`get()`方法获取移动后的点位坐标。最后，我们可以使用这些点位坐标进行其他操作，例如计算线条长度或绘制其他形状。

相关问题

arcgis js for JavaScript 4.X 移动轨迹动画 案例全部代码

以下是一个基于 ArcGIS JavaScript API 4.x 实现移动轨迹动画的示例代码：

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/Graphic",
  "esri/geometry/Point",
  "esri/layers/GraphicsLayer",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/geometry/Polyline",
  "esri/geometry/support/webMercatorUtils",
  "dojo/domReady!"
], function(Map, MapView, Graphic, Point, GraphicsLayer, SimpleMarkerSymbol, SimpleLineSymbol, Polyline, webMercatorUtils) {
  // 定义起点和终点的经纬度坐标
  var startPoint = [-122.414, 37.776];
  var endPoint = [-122.426, 37.776];

  // 创建地图和地图视图
  var map = new Map({
    basemap: "streets-navigation-vector"
  });
  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: startPoint,
    zoom: 14
  });

  // 创建图形图层，并添加到地图中
  var graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);

  // 创建起点和终点的点图形，并添加到图形图层中
  var startSymbol = new SimpleMarkerSymbol({
    color: "green",
    size: "8px"
  });
  var endSymbol = new SimpleMarkerSymbol({
    color: "red",
    size: "8px"
  });
  var startPointGraphic = new Graphic({
    geometry: new Point({
      longitude: startPoint[0],
      latitude: startPoint[1]
    }),
    symbol: startSymbol
  });
  var endPointGraphic = new Graphic({
    geometry: new Point({
      longitude: endPoint[0],
      latitude: endPoint[1]
    }),
    symbol: endSymbol
  });
  graphicsLayer.addMany([startPointGraphic, endPointGraphic]);

  // 创建轨迹线的符号，并添加到图形图层中
  var lineSymbol = new SimpleLineSymbol({
    color: "blue",
    width: 4
  });
  var polylineGraphic = new Graphic({
    geometry: new Polyline(),
    symbol: lineSymbol
  });
  graphicsLayer.add(polylineGraphic);

  // 计算移动轨迹的点集合
  var points = [];
  for (var i = 0; i <= 100; i++) {
    var lon = startPoint[0] + (endPoint[0] - startPoint[0]) * i / 100;
    var lat = startPoint[1] + (endPoint[1] - startPoint[1]) * i / 100;
    points.push([lon, lat]);
  }

  // 定义当前移动到的点的索引
  var currentIndex = 0;

  // 定义移动函数，每隔一段时间移动到下一个点
  function move() {
    polylineGraphic.geometry.addPath(points.slice(currentIndex, currentIndex + 2));
    currentIndex += 1;
    if (currentIndex < points.length - 1) {
      setTimeout(move, 50);
    }
  }

  // 将经纬度坐标转换为 WebMercator 坐标系
  points = points.map(function(point) {
    return webMercatorUtils.geographicToWebMercator(new Point({
      longitude: point[0],
      latitude: point[1]
    }));
  });

  // 开始移动
  move();
});

在这个示例代码中，我们首先创建了一个地图和地图视图，并在地图上添加了一个图形图层。然后，我们创建了起点和终点的点图形，并将它们添加到图形图层中。接着，我们创建了轨迹线的符号，并将其添加到图形图层中。接下来，我们计算了移动轨迹的点集合，并定义了一个移动函数，每隔一段时间移动到下一个点。最后，我们将经纬度坐标转换为 WebMercator 坐标系，并开始移动。

需要注意的是，该示例代码中的移动函数仅是一个简单的实现，实际应用中可能需要更加复杂的实现，例如根据实时数据更新移动轨迹等。

polyline.animate

polyline.animate是一个用于在地图上绘制折线并实现动画效果的函数。它可以通过指定折线的起点、终点以及动画的持续时间来创建一个平滑的动画效果。在动画过程中，折线会逐渐从起点移动到终点，并且可以设置其他属性，如颜色、宽度等。

该函数的使用方法可能因具体的地图API而有所不同，以下是一个示例代码（以JavaScript和百度地图API为例）：

// 创建地图实例
var map = new BMap.Map("mapContainer");

// 创建起点和终点坐标
var startPoint = new BMap.Point(116.404,39.915);
var endPoint = new BMap.Point(116.414, 39.925);

// 创建折线对象
var polyline = new BMap.Polyline([startPoint, endPoint], {strokeColor: "blue", strokeWeight: 3});

// 将折线添加到地图上
map.addOverlay(polyline);

// 创建动画效果
polyline.animate({path: [startPoint, endPoint]}, {duration: 2000});

上述代码中，首先创建了一个地图实例，并指定了起点和终点的坐标。然后创建了一个折线对象，并设置了折线的颜色和宽度。接着将折线添加到地图上，并通过调用animate函数创建了一个持续时间为2000毫秒的动画效果。