缘起:
抖音中的设计相关主题中,现在流行展示中国色色卡,希望通过firemonkey中的相关技术实现出来。
因为是中国色,选用了《延禧攻略》中古装扮相作为主角,中国色衬底,看看效果。
结果:
用到的技术:
- json转成xml。
- xml读取。
- 抠图。
- 颜色转换。
准备工作:
1、下载color.json
1) 使用浏览器打开:http://zhongguose.com/#putaojiangzi
2)右击鼠标,查看网页源码:
3)ctrl+f,输入“json”
4)找到如下路径:
5)定位路径:http://zhongguose.com/colors.json,看到如下结果,说明猜测的路径正确。
6)下载:
使用nas下载:
2、使用在线转换json到xml格式
1)因为firemonkey读写该colors.json文件有问题(试了很长时间无果)
2)使用国外的一个在线网站进行转换(国内的bejson转换的xml无法使用)http://convertjson.com/json-to-xml.htm
[a]选择color.json上传
[b]转换完成后点击“Download Result” 按钮
3、抠图。
使用前几天的《介绍一种AI的抠图方法》的方法扣了图:
代码:
- 加载xml文件,并将颜色放入combobox
procedure TForm1.FormCreate(Sender: TObject);//加载转换好的xml文件
varicount: Integer;colorstring: string;
beginXMLDocument1.LoadFromFile('D:\firemonkeysr\chinesecolowr\convertjson.xml');Memo1.Lines := XMLDocument1.XML; {查看}for icount := 0 to XMLDocument1.DocumentElement.ChildNodes.Count - 1 dobegincolorstring := XMLDocument1.DocumentElement.ChildNodes[icount].ChildNodes['hex'].Text;colorstring:='$ff'+copy(colorstring,2,length(colorstring)-1);//注意在前面加入“$ff”,作为颜色字串Self.ComboBox1.Items.Add(colorstring);end;
end;
- 在rectangle中fill.bitmap.bitmap中加载“皇后”的照片,并准备另一个rectangle作为背景:
procedure TForm1.Image1Click(Sender: TObject);//加载“皇后”图片,并设置背景rectangle的位置和大小
begin//在rectangle的fill.bitmap.bitmap中加入照片Rectangle1.Fill.Bitmap.Bitmap.LoadFromFile('C:\Users\winfred\Downloads\queen-removebg-preview.png');Rectangle1.Width := Rectangle1.Fill.Bitmap.Bitmap.Width / 2;Rectangle1.Height := Rectangle1.Fill.Bitmap.Bitmap.Height / 2;Rectangle1.Stroke.Kind := TBrushKind.bkNone; //边框类型,无Rectangle1.Fill.Kind := TBrushKind.bkBitmap; //填充类型,图片Rectangle1.Fill.Bitmap.WrapMode := TWrapMode.wmTileStretch; //拉伸 //准备背景控件,注意图层放在下一层Self.Rectangle3.Position.X := Self.Rectangle1.Position.X;self.Rectangle3.Position.Y := self.Rectangle1.Position.Y;Self.Rectangle3.Width := Self.Rectangle1.Width;Self.Rectangle3.Height := self.Rectangle1.Height;end;
- 使用xml中加载的“中国色”改变背景颜色:
procedure TForm1.ImageViewer1Click(Sender: TObject);
begin//注意StrToInt64,将字符串转成颜色Self.Rectangle3.Fill.Color:=StrToInt64(ComboBox1.items[ComboBox1.ItemIndex])//;
end;
- 生成合成后的图片保存:
procedure TForm1.SpeedButton1Click(Sender: TObject);//生成合成后的图片
vartmpbitmap: TBitmap;
begintmpbitmap := self.Layout1.MakeScreenshot;tmpbitmap.SaveToFile('d:\chinesecolor.png');
end;
下载:
链接:https://pan.baidu.com/s/1TnZiQ8hvTCuBrwOvie8a0g
提取码:32di