颤振无法使用 canvas.drawImage 在精确偏移处绘制图像

时间:2021-06-09 05:36:31

标签: android ios flutter drawimage custom-painting

你好,我正在创建颤振应用程序并尝试绘制图像,我从下面的答案中成功地做到了

This is the main answer from where i can get idea about dropping pin on tap

From this answer i am drwaing image successfully

但问题是引脚没有绘制到精确的偏移(x&y)位置,我在这里附上了屏幕截图,这样你就可以得到更好的主意。

Here is the screen shot please take a look at the exact issue

这是我的代码,我可以从中获取用户点击的 x 和 y 位置

return Scaffold(
      appBar: AppBar(
          title: Text(widget.title,style: TextStyle(color: Colors.white),),
          backgroundColor: Color.fromRGBO(86, 35, 127, 1),
          brightness: Brightness.dark
      ),
      body: SafeArea(
        top: true,
        bottom: true,
        left: true,
        right: true,
        child: Stack(
          children: [
            Listener(
              onPointerDown: (PointerDownEvent event) {
                RenderBox referenceBox = _paintKey.currentContext.findRenderObject();
                Offset offset = referenceBox.globalToLocal(event.position); // here i am getting offset where user tapped
                setState(() {
                  _offset = offset;
                  isDroppedPin = true;
                });
                if (widget.pinNo <= 5){

                }else{
                  Toast.show("Maximum Pin Limit Reached", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);
                }
              },
              child: InteractiveViewer(
                minScale: 0.1,
                maxScale: 3,
                child: Stack(
                  children: [
                    new CustomPaint(
                      key: _paintKey,
                      painter: new MyCustomPainter(_image,_offset),
                    ),
                  ],
                ),
              ),
            ),
            Positioned.fill(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  height: 50,
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Color.fromRGBO(86, 35, 127, 1), // background
                      onPrimary: Colors.white,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),// foreground
                    ),
                    onPressed: () {
                      if (isDroppedPin == false){
                        Toast.show("Please Add pin", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);
                      }else{
                        Navigator.push(context, EOBAElementFormRoute(_offset.dx.toString(),_offset.dy.toString(),widget.title,widget.pinNo,widget.image_url,widget.type,widget.drawing_id));
                      }
                    },
                    child: Container(
                      width: double.infinity,
                      child: Text('Next', style: TextStyle(color: Colors.white,fontSize: 17,fontWeight: FontWeight.w500),textAlign: TextAlign.center,),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      )
    );

这里是画图钉的班级

class MyCustomPainter extends CustomPainter {
  ui.Image image;
  final Offset _offset;

  MyCustomPainter(this.image,this._offset) : super();

  @override
  Future paint(Canvas canvas, Size size) async {
    if (image != null) {
      canvas.drawImage(image, _offset, new Paint());
    }
  }

  @override
  bool shouldRepaint(MyCustomPainter other) => other._offset != _offset;
}

谁能知道为什么没有将图钉绘制到用户点击的确切位置

0 个答案:

没有答案
相关问题