angular5+ 如何点击改变图片颜色（png/svg）

作者: 小宝薯 | 来源:发表于2018-06-08 11:17 被阅读89次

angular5+ 如何点击改变图片颜色（png/svg）
iOS-加载SVG类型的图片并且实现可点击长按功能
用drop-shadow实现SVG（改变png图片颜色）
如何将SVG转换为PNG
android apk瘦身
SVG矢量图打造不规则自定义控件，可点击的中国地图
SVG 通过css filter动态改变颜色
Apk优化
用png图片直接转成矢量图标
Android SVG

二话不说，先上gif图：

上png，下svg

绑定点击事件 (click)="事件名()"
绑定src="{{变量名}}"
DOM元素获取：ViewChild, ElementRef, AfterViewInit;

ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，才能正确获取查询的元素。

一、通过img的src实现图片颜色切换

绑定src :src="{{pngUrl}}"
奇偶次切换，原理类似toggle

  <ul>
    <li>
//添加按钮点击事件pngChange
      <button type="button" name="button" (click)="pngChange()">蓝色png，点击变成绿色</button>
      <img width="40" alt="Angular Logo" src="{{pngUrl}}" #png class="png">
    </li>
</ul>

//DOM元素获取的话需要import ViewChild, ElementRef, AfterViewInit;
import { Component,ViewChild,ElementRef, AfterViewInit } from '@angular/core';

export class AppComponent  {
  @ViewChild('png') png:ElementRef; //获取到该元素

  public pngUrl = "../assets/blue.png"; //定义src的绑定变量
  public count1 = 0; //用以判断点击的奇偶次


 //点击改变png图片颜色，奇数绿色，偶数蓝色，类似toggle
  pngChange(){
  this.count1 ++;
  if(this.count1 %2 ==1) {
    console.log(11);
    this.pngUrl="../assets/green.png";
    }else {
    this.pngUrl="../assets/blue.png";
          }
  }

//必须要写的
ngAfterViewInit() {
     // console.log(222);
   }
}

二、<svg>直接嵌在html页面中

<ul>
  <li>
    <button type="button" name="button" (click)="svgChange()">粉色svg，点击点击变成橙色</button>

 //path是矢量路径，这个有专门的svg编辑器生成这些代码，不用管～
       <svg  viewBox="0 0 1024 1024"  width="40" height="40" class="svg" #svg>
      <path d="M768 728.615385v-7.876923-11.815385c-11.815385-110.276923-122.092308-196.923077-256-196.923077s-244.184615 86.646154-256 192.984615v23.63077c0 43.323077 35.446154 78.769231 78.769231 78.76923h354.461538c43.323077 0 78.769231-35.446154 78.769231-78.76923zM512 1024C228.430769 1024 0 795.569231 0 512S228.430769 0 512 0s512 228.430769 512 512-228.430769 512-512 512z m0-555.323077c94.523077 0 169.353846-74.830769 169.353846-169.353846S606.523077 126.030769 512 126.030769s-169.353846 78.769231-169.353846 173.292308 74.830769 169.353846 169.353846 169.353846z" #path fill="#d4237a"></path>
    </svg>
  </li>
</ul>

//导包
import { Component,ViewChild,ElementRef, AfterViewInit } from '@angular/core';
//元素获取 svg或者这个path它俩任意一个都能改变颜色，就是在事件触发时找到nodeValue会有点差别～
@ViewChild('svg') svg:ElementRef;
@ViewChild('path') path:ElementRef;
//用以判断奇偶次
public count2 = 0;
//事件触发
  svgChange(){
    this.count2++;
    if(this.count2 % 2== 1) {
//针对svg的元素进行变色属性获取操作，一般选这种方案，
  this.svg.nativeElement.firstChild.attributes[2].nodeValue="orange";
//这是对<path>标签的DOM获取后的颜色操作
 // this.path.nativeElement.farthestViewportElement.firstChild.attributes.fill.nodeValue="orange";
    } else {      
  this.svg.nativeElement.firstChild.attributes[2].nodeValue="#d4237a";
// this.path.nativeElement.farthestViewportElement.firstChild.attributes.fill.nodeValue="#d4237a";
    }
  }