Question

我正在卡片中显示我的SVG图片

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  List<CameraDescription> cameras = await availableCameras();

  Widget _consumer() => Consumer4<ThemeProvider, CameraProvider, NetworkProvider, UserProvider>(
        builder: (context, theme, camera, network, user, child) => App(
          page: user.user == null
              ? WelcomePage()
              : user.user.isEmployer ? EmployerPage() : user.user.resume == null ? SProfileSetupPage() : SeekerPage(),
              // Detection to where the page should be.
        ),
      );

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider<ThemeProvider>(
          create: (_) => ThemeProvider(Themes.light),
        ),
        ChangeNotifierProvider<CameraProvider>(
          create: (_) => CameraProvider(cameras),
        ),
        ChangeNotifierProvider<NetworkProvider>(
          create: (_) => NetworkProvider.instance(),
        ),
        ChangeNotifierProvider<UserProvider>(
          create: (_) => UserProvider.instance(),
        ),
      ],
      child: await Funcs.isPhysicalDevice()
          ? _consumer()
          : Constants.isDebug
              ? DevicePreview(
                  builder: (context) => _consumer(),
                )
              : _consumer(),
    ),
  );
}

class App extends StatelessWidget {
  final Widget page;

  const App({Key key, this.page}) : super(key: key);

  @override
  Widget build(BuildContext context) => Platform.isIOS
      ? CupertinoApp(
          home: this.page,
          theme: Utils.currentTheme(context: context).cupertinoOverrideTheme,
          navigatorObservers: [
            Services().analytics.firebaseAnalyticsObserver,
          ],
          title: Constants.title,
          localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
            DefaultMaterialLocalizations.delegate,
            DefaultWidgetsLocalizations.delegate,
          ],
          debugShowCheckedModeBanner: false,
        )
      : MaterialApp(
          home: this.page,
          theme: Utils.currentTheme(context: context),
          navigatorObservers: [
            Services().analytics.firebaseAnalyticsObserver,
          ],
          title: Constants.title,
          localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
            DefaultMaterialLocalizations.delegate,
            DefaultWidgetsLocalizations.delegate,
          ],
          debugShowCheckedModeBanner: false,
        );
}

我无法在此处上传SVG文件，但是我想做的是：（触发事件后）

在开始时显示完整的原始SVG，但是在执行操作时，只有SVG图像的左半部分或右半部分显示为彩色，而另一半则为灰度。
我希望能够调整旋转角度，以便可以选择图像变灰的角度。

有人可以指出我正确的方向吗？

Answer 1

您可以在容器上设置一个伪元素，并为此伪元素设置一个渐变，该渐变对其一半是透明的，对另一半是灰色的。线性渐变可以设置为您想要的角度

.card-image {
    width: 200px;
    height: 300px;
    display: inline-block;
    position: relative;
}

.grayed:after {
    content: "";
    position: absolute;
    width: 100%; 
    height: 100%;
    left: 0;
    z-index: 9;
    background-image: linear-gradient(110deg, transparent 50%, #888a 50%);

}

<div class="card-image">
    <img src="http://placekitten.com/200/300" />
</div>
<div class="card-image grayed">
    <img src="http://placekitten.com/200/300" />
</div>

.card-image {
    width: 600px;
    height: 400px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.grayed:after {
    content: "";
    position: absolute;
    width: 200%; 
    height: 200%;
    left: 50%;
    top: -50%;
    z-index: 9;
    background-color: white;
    mix-blend-mode: color;
    transform: rotate(30deg);
    transform-origin: left center;
    animation: rotate infinite 10s linear;
}

@keyframes rotate {
    from {     transform: rotate(0deg);}
    to {     transform: rotate(360deg);}

}

<div class="card-image grayed">
    <img src="http://placekitten.com/600/400" />
</div>

Answer 2

您可以使用CSS在图像上添加线性渐变。

background-image:
linear-gradient(to bottom, rgba(x, y , w, z ), rgba(a, b, c, d)),
url('image.jpg');

然后可以使用javascript to modify the style in the class，这可以让您更改颜色等属性，但是，我不确定哪个属性可以控制渐变的起始位置，但是如果需要，它是一个很好的指针。如果您找到一种方法来选择渐变的起始位置（例如，相对于偏移量或特定的高度），则可以将其设为黑白，然后使用JS修改位置/颜色。

仅显示SVG的一半

2 个答案: