Nakreslete kruh plynule transformuje do linie

Question 1

Jsem čelí problému v mé Chvění app, že neumím kreslit tento druh tvar pro můj Jezdec

Co mám teď, je:

final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.fill;

    final rect = Rect.fromCircle(center: center, radius: thumbRadius);
    final rrect = RRect.fromRectAndRadius(
      Rect.fromPoints(
        Offset(rect.left - 5, rect.top),
        Offset(rect.right + 5, rect.bottom),
      ),
      Radius.circular(thumbRadius + 2),
    );

    canvas.drawRRect(rrect, paint);

Také, to by bylo skvělé pro změnu výšky všechny bar, protože další změny kódu pouze velikost po hráči

SliderTheme(
  data: SliderThemeData(
  trackHeight: 2,
  thumbShape: CustomSliderPlayer(),
  ),
  child: Slider(...)

Question 2

Z komentářů to vypadá, že nejste obeznámeni s kvadratické bézierovy křivky, které jsou velmi jednoduché, doporučuji vám začít na Javascript, canvas, jsou jednodušší test, který způsob a logika je stejná, jsme se přesunout do výchozího bodu poté nakreslíme křivku, viz příklad úryvek níže

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function dobleQuad(x, y, w, h) {
  ctx.beginPath();
  ctx.moveTo(x - w, y);
  ctx.quadraticCurveTo(x, y - h, x + w, y);
  ctx.moveTo(x - w, y);
  ctx.quadraticCurveTo(x, y + h, x + w, y);
  ctx.fill();
}

function drawSlider(x, y) {
  ctx.moveTo(0, y - 2);
  ctx.fillRect(0, y - 2, canvas.width, 4);
  dobleQuad(x, y, 20, 22)
}

drawSlider(50, 50)

canvas.addEventListener('mousemove', function(evt) {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  var rect = canvas.getBoundingClientRect();
  drawSlider( evt.clientX - rect.left, 50 )
})

<canvas id="canvas"></canvas>

Jen mějte na paměti, že v JS je to quadraticCurveTo ale v flutter quadraticBezierTo

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo

void ctx.quadraticCurveTo(cpx, cpy, x, y);

cpx, cpy 
The coordinates of the control point.

x, y
The coordinates of the end point.

https://api.flutter.dev/flutter/dart-ui/Path/quadraticBezierTo.html

void quadraticBezierTo(
  double x1,  double y1,
  double x2,  double y2
)

Adds a quadratic bezier segment that curves from the current point
to the given point (x2,y2), using the control point (x1,y1).

Helder Sepulveda · Answer 1 · 2021-11-22T17:10:38

Z komentářů to vypadá, že nejste obeznámeni s kvadratické bézierovy křivky, které jsou velmi jednoduché, doporučuji vám začít na Javascript, canvas, jsou jednodušší test, který způsob a logika je stejná, jsme se přesunout do výchozího bodu poté nakreslíme křivku, viz příklad úryvek níže

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function dobleQuad(x, y, w, h) {
  ctx.beginPath();
  ctx.moveTo(x - w, y);
  ctx.quadraticCurveTo(x, y - h, x + w, y);
  ctx.moveTo(x - w, y);
  ctx.quadraticCurveTo(x, y + h, x + w, y);
  ctx.fill();
}

function drawSlider(x, y) {
  ctx.moveTo(0, y - 2);
  ctx.fillRect(0, y - 2, canvas.width, 4);
  dobleQuad(x, y, 20, 22)
}

drawSlider(50, 50)

canvas.addEventListener('mousemove', function(evt) {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  var rect = canvas.getBoundingClientRect();
  drawSlider( evt.clientX - rect.left, 50 )
})

<canvas id="canvas"></canvas>

Jen mějte na paměti, že v JS je to quadraticCurveTo ale v flutter quadraticBezierTo

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo

void ctx.quadraticCurveTo(cpx, cpy, x, y);

cpx, cpy 
The coordinates of the control point.

x, y
The coordinates of the end point.

https://api.flutter.dev/flutter/dart-ui/Path/quadraticBezierTo.html

void quadraticBezierTo(
  double x1,  double y1,
  double x2,  double y2
)

Adds a quadratic bezier segment that curves from the current point
to the given point (x2,y2), using the control point (x1,y1).

je to docela v pohodě, není přesně to, co jsem hledal, ale dělal to s flutter a funguje to téměř v pořádku. Teď jsem kreslení jezdec jen s násobením je pozice (0,0 do 1,0) 325, není nejlepší způsob, myslím, že drawSlider(25 + sliderPosition * 325, 25);

Nakreslete kruh plynule transformuje do linie

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii