代码之家  ›  专栏  ›  技术社区  ›  Ankur Prakash

颤振:如何移动、旋转和缩放容器?

  •  0
  • Ankur Prakash  · 技术社区  · 6 年前

    我想做一个容器,可以拖动,缩放和旋转。我能实现变焦。下面是我的代码:

    //variable declaration
      double _scale = 1.0;
      double _previousScale;
      var yOffset = 400.0;
      var xOffset = 50.0;
      var rotation = 0.0;
      var lastRotation = 0.0;
    

    //生成方法

    @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Center(
              child: GestureDetector(
                onScaleStart: (scaleDetails) {
                  _previousScale = _scale;
                  print(' scaleStarts = ${scaleDetails.focalPoint}');
                },
                onScaleUpdate: (scaleUpdates){
                  //ScaleUpdateDetails
                  rotation += lastRotation - scaleUpdates.rotation;
                  lastRotation = scaleUpdates.rotation;
                  print("lastRotation = $lastRotation");
                  print(' scaleUpdates = ${scaleUpdates.scale} rotation = ${scaleUpdates.rotation}');
                  setState(() => _scale = _previousScale * scaleUpdates.scale);
                },
                onScaleEnd: (scaleEndDetails) {
                  _previousScale = null;
                  print(' scaleEnds = ${scaleEndDetails.velocity}');
                },
                child:
                Transform(
                  transform: Matrix4.diagonal3( Vector3(_scale, _scale, _scale))..rotateZ(rotation * math.pi/180.0),
                  alignment: FractionalOffset.center,
                  child: Container(
                    height: 200.0,
                    width: 200.0,
                    color: Colors.red,
                  ),
                )
                ,
              ),
            ),
          ),
        );
      }
    

    目前,没有旋转,我不能移动容器。

    0 回复  |  直到 6 年前
        1
  •  6
  •   Swapnil Kadam    4 年前

    Matrix Gesture Detector package 1 包装,这里有基本样品:

    MatrixGestureDetector(
      onMatrixUpdate: (m, tm, sm, rm) {
        setState(() {
          matrix = n;
        });
      },
      child: Transform(
        transform: matrix,
        child: ....
      ),
    ),
    

    example 包含6个演示的文件夹

        3
  •  0
  •   Sanju Bhatt    4 年前

    你可以用 旋转箱 交互式浏览器

    用于移动容器的InteractiveViewer小部件中的panEnabled属性

    Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: RotatedBox(
            quarterTurns: 1,
            child: InteractiveViewer(
              boundaryMargin: EdgeInsets.zero,
              minScale: 1,
              maxScale: 4,
              child: Container(
                height: 200,
                width: 200,
                color: Colors.blue,
              ),
            ),
          ),
        ),
      ),