获取从.svg的`<path>`信息中推导出的区域的值

Question

让我们以这个简单的.svg为​​例：

对于那个形状我得到这个代码：

public class MyFirebaseMessaging_T extends FirebaseMessagingService {
 @Override
 public void onMessageReceived(final RemoteMessage remoteMessage) {
  if (remoteMessage.getNotification().getTitle().equals("Notice")) {
   android.os.Handler handler = new android.os.Handler(getMainLooper());
   handler.post(new Runnable() {
    @Override
    public void run() {
     Toast.makeText(MyFirebaseMessaging_T.this, "" + remoteMessage.getNotification().getBody(), Toast.LENGTH_SHORT).show();
    }
   });

  } else if (remoteMessage.getNotification().getTitle().equals("Arrivé")) {
   showArrivedNotification(remoteMessage.getNotification().getBody());
  }
 }

 private void showArrivedNotification(String body) {
  PendingIntent contentIntent = PendingIntent.getActivity(getBaseContext(), 0, new Intent(), PendingIntent.FLAG_ONE_SHOT);
  NotificationCompat.Builder builder = new NotificationCompat.Builder(getBaseContext());
  builder.setAutoCancel(true).setDefaults(android.app.Notification.DEFAULT_LIGHTS | android.app.Notification.DEFAULT_SOUND).setWhen(System.currentTimeMillis())
   .setSmallIcon(R.mipmap.ic_launcher_round)
   .setContentTitle("Arrivé").setContentText(body).setContentIntent(contentIntent);
  NotificationManager notificationManager = (NotificationManager) getBaseContext().getSystemService(Context.NOTIFICATION_SERVICE);
  notificationManager.notify(1, builder.build());
 }
}

我有办法获得从.svg的 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <path d="M1000,500c0,276.143-223.857,500-500,500c-276.143,0-57.729-467.521-313.389-571.889C-252.278,248.944,223.858,0,500,0 C776.143,0,1000,223.857,1000,500z"/> </svg> 信息中推断出的区域价值吗？

<path>

Answer 1

您可以将路径转换为多边形，然后使用多边形的＆＃34;区域＆＃34;算法

准确性取决于您在转换过程中使用的点数以及可能累积的任何浮点错误。

我不知道它的精确度与计数像素方法相比如何。但我希望它更准确。

＆＃13;

＆＃13;

function calculateAreaOfPolygon(points)
{
  if (points.length < 3)
    return 0;
  var area = 0, n = points.length;
  for (var i=0; i<(n-1); i++) {
    area += points[i].x * points[i+1].y;
    area -= points[i+1].x * points[i].y;
  }
  area += points[n-1].x * points[0].y;
  area -= points[0].x * points[n-1].y;
  return Math.abs(area) / 2;
}

function convertPathToPolygon(pathId)
{
  var pathElem = document.getElementById(pathId);
  var pathLen = pathElem.getTotalLength();
  var numSteps = Math.floor(pathLen * 2);
  var points = [];
  for (var i=0; i<numSteps; i++) {
    var p = pathElem.getPointAtLength(i * pathLen / numSteps);
    points.push(p);
  }
  return points;
}

var pathPointsArray = convertPathToPolygon("mypath");

console.log(calculateAreaOfPolygon(pathPointsArray));

＆＃13;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
    <path id="mypath" d="M1000,500c0,276.143-223.857,500-500,500c-276.143,0-57.729-467.521-313.389-571.889C-252.278,248.944,223.858,0,500,0
        C776.143,0,1000,223.857,1000,500z"/>
</svg>

＆＃13;

＆＃13;

＆＃13;