Наклейки на изображении (перетаскиваемые, масштабируемые и вращающиеся) - PullRequest
Новая
       27

Наклейки на изображении (перетаскиваемые, масштабируемые и вращающиеся)

0 голосов
/ 24 января 2019

Мне нужно сделать что-то вроде наклейки на изображении.Я хочу, чтобы это было перетаскиваемым, масштабируемым и вращающимся.Возможно ли это с флаттером?

Я обнаружил, что класс перетаскивается на https://stackoverflow.com/a/53957707/1984747

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: position.dx,
          //top: position.dy - height + 20,
          child: Draggable(
            child: Container(
              width: width,
              height: height,
              color: Colors.blue,
              child: Center(child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
            ),
            feedback: Container(
              child: Center(
                child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
              color: Colors.red[800],
              width: width,
              height: height,
            ),
            onDraggableCanceled: (Velocity velocity, Offset offset){
              setState(() => position = offset);
            },
          ),
        ),
      ],
    );
  }

Пожалуйста, немного подсказок.

1 Ответ

0 голосов
/ 24 января 2019

GestureDetector () можно использовать для определения масштаба и жеста поворота.

Затем вам нужно будет рассчитать масштаб и поворот и применить преобразование с помощью Преобразование

Однако, если ваша наклейка маленькая, я не могу представить, как это будет работать (нет места для размещения 2 точек касания на маленькой вещи).Так что вы, вероятно, захотите использовать детектор жестов размером с изображение.

class _YourWidgetState extends State<YourWidget> {

double finalScale = 1.0;
double finalRotation = 0.0;
ScaleUpdateDetails scaleStart;

Widget build() {
  return GestureDetector(
    onScaleStart: (ScaleUpdateDetails details) => {
        // you will need this in order to calculate difference
        // in rotation and scale:
        scaleStart = details;
    },
    onScaleUpdate: (ScaleUpdateDetails details) => {
       setState(() => {
         finalScale =  <calculate final scale here>
         finalRotation =  <calculate final rotation here>
       })
    },
    child: Stack(children: [
       <image widget>,
       Transform(
          transform: Matrix4.diagonal3(Vector3(finalScale, finalScale, finalScale))..rotateZ(finalRotation),
          child: <sticker widget>
       )
    ])
  )
}

}

альтернативно вместо GestureDetector() для обнаружения масштабирования / вращения вы можете использовать ползунки, чтобы позволить контролировать значение, а затем передавать значения масштаба / вращения на Transform.

...