ウェブのフラッターでのSVG & Viewbox
AndroidやIOSには問題はありませんでしたが、WebのためにFlutterでSVGを表示できませんでした.
それから、私はフラッタウェブ用のSVGウィジェットを作成しました.
Viewboxタグに対応するSVGを表示するウィジェット
たぶん、既存のクールなプラグインが動作します
今だけ使ってください.
それから、私はフラッタウェブ用のSVGウィジェットを作成しました.
Viewboxタグに対応するSVGを表示するウィジェット
たぶん、既存のクールなプラグインが動作します
今だけ使ってください.
import 'package:flutter/material.dart';
import 'package:svg_path_parser/svg_path_parser.dart';
class TwitterIcon extends StatelessWidget {
final double w;
final double h;
final double viewBoxX;
final double viewBoxY;
final double viewBoxW;
final double viewBoxH;
double devicePixelRatio = 1.0;
TwitterIcon(this.w, this.h, this.viewBoxX, this.viewBoxY,this.viewBoxW, this.viewBoxH) :super() {
}
final paths = [
["M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z", Colors.blue],
];
@override
Widget build(BuildContext context) {
this.devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
return Container(
width: w,
height: h,
child: CustomPaint(
painter: TwitterIconPainter(this) ,
),
color: Colors.blueGrey,
);
}
}
class TwitterIconPainter extends CustomPainter {
final bool showPath;
final TwitterIcon parenrt;
TwitterIconPainter(this.parenrt,{this.showPath = true});
@override
void paint(Canvas canvas, Size size) {
//print("paint 00 ${paths}");
// device ratio
var drm = Matrix4.identity();
//drm.scale(this.parenrt.devicePixelRatio, this.parenrt.devicePixelRatio);
var viewboxWH = Matrix4.identity();
double widthScale = this.parenrt.w/this.parenrt.viewBoxW;
double heightScale = this.parenrt.h/this.parenrt.viewBoxH;
drm.scale(widthScale, heightScale);
canvas.transform(drm.multiplied(viewboxWH).storage);
//
canvas.clipRect(Rect.fromLTRB(0.0, 0.0, this.parenrt.viewBoxW, this.parenrt.viewBoxH));
// viewbox x,y
var viewboxXY = Matrix4.translationValues(-1*this.parenrt.viewBoxX, -1*this.parenrt.viewBoxY, 0.0);
canvas.transform(viewboxXY.storage);
for(var e in this.parenrt.paths){
//print("print ${e}");
Path path = parseSvgPath(e[0]);
Color color = e[1];
var paint = Paint()
..color = color
..strokeWidth = 4.0;
canvas.drawPath(path, paint);
if (showPath) {
var border = Paint()
..color = Colors.black
..strokeWidth = 1.0
..style = PaintingStyle.stroke;
canvas.drawPath(path, border);
}
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
Reference
この問題について(ウェブのフラッターでのSVG & Viewbox), 我々は、より多くの情報をここで見つけました https://dev.to/kyorohiro/svg-viewbox-at-flutter-for-web-3nl0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol