如何在Flutter中使用图像坐标将图像精确定位在背景图像上？

Question

我正在尝试使用动态图像坐标并添加动态图像比例值将图像叠加在另一图像之上。我使用了一个 Stack 作为父窗口小部件，将两个图像窗口小部件作为子窗口小部件。然而，我面临着准确调整它们的位置和比例的挑战。

我附上背景图片的屏幕截图。我需要在空白处放置另一张图像。

背景图片：-

第二张图片：-

图像坐标：-

{
 'img_width: 540, '
      'img_height: 960, '
      'image_coordinates: {'
      'width_in_px: 280, '
      'height_in_px: 398, '
      'top_in_px: 405, '
      'left_in_px: 173, '
      'width: 51.85, '
      'height: 41.46, '
      'top: 62.92, '
      'left: 57.97, '
      'type: box}
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class EditActivity extends StatefulWidget{
  @override
  _EditActivity createState() => new _EditActivity();
}

class _EditActivity extends State<EditActivity> {

  String image = 'https://lh3.googleusercontent.com/a/ACg8ocKeSe_PhCD8mS7RySGmfDcwAcnHbiEXEk5fv4G2fTqbce4=s576-c-no';
  String bgImage = 'https://files.verbs.world/2023/11/13/19/Zf13UiLP8.PNG';

  String coordinates = ''
      'img_width: 540, '
      'img_height: 960, '
      'image_coordinates: {'
      'width_in_px: 280, '
      'height_in_px: 398, '
      'top_in_px: 405, '
      'left_in_px: 173, '
      'width: 51.85, '
      'height: 41.46, '
      'top: 62.92, '
      'left: 57.97, '
      'type: box}';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            
            Container(
              width: 540,
              height: 960,
              child: Image.network(bgImage,fit: BoxFit.fitWidth,),
            ),
            Positioned(left: 173,top: 408 ,child: Container(
              color: Colors.amber,
              width: 280,
              height: 398,
              alignment: Alignment.center,
              child: Image.network(image,fit: BoxFit.cover,width: 280,
                height: 398,
              ),
            ),)

          ],
        ),
      ),
    );
  }
}

我正在尝试使用动态图像坐标并添加动态图像比例值将图像叠加在另一图像之上。我使用了一个 Stack 作为父窗口小部件，将两个图像窗口小部件作为子窗口小部件。然而，我面临着准确调整它们的位置和比例的挑战。

Answer 1

更改居中位置并使用填充移动到您需要的位置，在堆栈中，先放置图像，然后放置背景，以便更适合您。

class EditActivity extends StatefulWidget {
  const EditActivity({super.key});

  @override
  _EditActivity createState() => _EditActivity();
}

class _EditActivity extends State<EditActivity> {
  String image =
      'https://lh3.googleusercontent.com/a/ACg8ocKeSe_PhCD8mS7RySGmfDcwAcnHbiEXEk5fv4G2fTqbce4=s576-c-no';
  String bgImage = 'https://files.verbs.world/2023/11/13/19/Zf13UiLP8.PNG';

  String coordinates = ''
      'img_width: 540, '
      'img_height: 960, '
      'image_coordinates: {'
      'width_in_px: 280, '
      'height_in_px: 398, '
      'top_in_px: 405, '
      'left_in_px: 173, '
      'width: 51.85, '
      'height: 41.46, '
      'top: 62.92, '
      'left: 57.97, '
      'type: box}';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(
                left: 92,
                top: 240,
              ),
              child: Center(
                child: Container(
                  color: Colors.amber,
                  width: 280,
                  height: 398,
                  alignment: Alignment.center,
                  child: Image.network(
                    image,
                    fit: BoxFit.cover,
                    width: 280,
                    height: 398,
                  ),
                ),
              ),
            ),
            Center(
              child: SizedBox(
                width: 540,
                height: 960,
                child: Image.network(
                  bgImage,
                  fit: BoxFit.fitWidth,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}