Androidはsvgの属性を動的に変更します

一緒に書く習慣をつけましょう!「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して3日目です。クリックしてイベントの詳細をご覧ください

背景を使用する

一部のシナリオでは、svgの上記の属性を動的に変更する必要があります。たとえば、一部のシナリオでは、バックグラウンドからデータを取得してから、動的にsvgに変更する必要があります。一部のパワーマップ(svg形式)では、リアルタイムデータを取得してから、上記のデータ変更をレンダリングする必要があります。

変更されたロジック

まず、Androidプロジェクトのアセットフォルダにsvg画像を配置し、メモリに変更を加えてから、データを携帯電話のストレージに保存します。svg形式は、domノードのツリー構造と見なすことができます。svg形式Androidでファイルを解析した後、変更したいノードを取得し、その属性を変更します。

コーディングの変更を開始

ファイルをsvg形式でアセットファイルに入れ、DocumentBuilderFactoryを使用してファイルをロードして入力ストリームに読み込み、次にDocumentBuilderを使用して、svgファイルをドキュメントドキュメントに変換してdom解析します。次の図に示すように、svg画像の特定の色の値を変更し、画像のマスクの色を白に変更します。

image.png

image.png

最初に、変更する場所とその場所を知る必要があります。つまり、変更した場所のラベル値を知り、それを変更する必要があります。たとえば、検索して注釈を付けた後、この場所にあることがわかります。注釈。

image.pngコードに到達したら、ドキュメントのルートノードを見つけ、gタグを見つけ、パス属性を見つけ、この場所の色の値の属性を変更する必要があります。この位置の属性を白に変更します#ffffff color 、コードをチェックしてみましょう。

//首先找到assets中的文件
factory = DocumentBuilderFactory.newInstance();
builder = factory.newDocumentBuilder();
inputStream=this.getResources().getAssets().open("bixin.svg");
document = builder.parse(inputStream);
//找到根Element
Element root = document.getDocumentElement();
//找到g标签
NodeList nodes = root.getElementsByTagName("g");
//找到第8个 g标签  ==口罩的标签
Element item = (Element) nodes.item(8);
//找到path标签
NodeList pathTagName = item.getElementsByTagName("path");
//找到第一个path标签
Element item1 = (Element) pathTagName.item(0);
String nodeName = item1.getNodeName();
//改变属性颜色为 #ffffff 白色
item1.setAttribute("fill","#ffffff");

//将内存中的Document 写到手机存储文件
TransformerFactory factory = TransformerFactory.newInstance();
Transformer transformer = factory.newTransformer();
transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
transformer.setOutputProperty(OutputKeys.VERSION, "1");
//将整个Document对象作为要写入xml文件的数据源
DOMSource source = new DOMSource(document);
String path = getExternalFilesDir(null) + "/newSvg.svg";
//写入的目标文件
StreamResult src = new StreamResult(new File(path));
transformer.transform(source, src);

复制代码

このようにして、携帯電話のストレージに保存されているファイルが変更されます。実行して比較してみましょう。

image.png

gitファイルアドレス

おすすめ

転載: juejin.im/post/7082578355668647967