DrGraph - SVG模块之一：显示与节点选择

  • 显示SVG
  • 编辑
  • 生成目标子集SVG

对于虚拟面板中的元件，以前采用FLASH技术实现相应显示与交互，通过ActionScript进行通信。现在看来，FLASH好象势微，使用起来有点麻烦，需要一些设置。其次，做FLASH的人也少了，后续也不太方便。
那就用SVG来进行改造。

显示SVG

将SVG解析置于DLL中，应用程序直接调用DLL完成解析并生成PNG，然后再画出显示。

UnicodeString filename = FResponseNode->AttributeValueByName("svgfileName");
TStringList * contents = new TStringList;
if(FileExists(filename))contents->LoadFromFile(filename);
UnicodeString firstLine = L"";
if(contents->Count)firstLine = contents->Strings[0].Trim();
bool drgraphFlag = firstLine.Pos(L"SVG by DrGraph");
int frameNumber = 1;
if(drgraphFlag)frameNumber = contents->Count - 1;UnicodeString getType = FResponseNode->AttributeValueByName("get");
if(getType == L"frameNumber")FResponseNode->AddAttribute("frameNumber", frameNumber);
else {int frameIndex = FResponseNode->IntAttributeValueByName("frameIndex");if(drgraphFlag && frameNumber > 0) {while(frameIndex < 0)frameIndex += frameNumber;while(frameIndex >= frameNumber)frameIndex -= frameNumber;filename = THelper::File::GetPath_Debug() + ExtractFileName(filename);if(FileExists(filename))DeleteFile(filename);THelper::File::SetFileContent(filename,THelper::FormatString(L"<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n%s", contents->Strings[frameIndex + 1]));Sleep(100);}TCbwSVG * svg = new TCbwSVG;UnicodeString dstFileName = THelper::FormatString(L"%s%s.png",THelper::File::GetPath_Debug(),THelper::File::ExtractPureFileName(filename)); // dstFileNamedouble scale = 1;if (NSVGimage * image = svg->ParseFromFile(filename, "px", 96.0)) {if (NSVGrasterizer * rast = svg->NewRasterizer()) {if (unsigned char* img = (unsigned char *)malloc(image->width * image->height * 4)) {svg->Rasterize(rast, // NSVGrasterizer* rimage, // NSVGimage* image0, // float tx0, // float tyscale, // float scaleimg, // unsigned char* dstimage->width * scale, // int wimage->height * scale, // int himage->width * 4); // int stridesvg->Save_Png(dstFileName, image->width, image->height, 4, img, image->width*4);free(img);}svg->Free(rast);}svg->Free(image);}delete svg;FResponseNode->AddAttribute("svgfileName", dstFileName);
}
delete contents;

其中，TCbwSVG直接包装C++的SVG库，省事。

class TCbwSVG {private:
public:__fastcall TCbwSVG();__fastcall ~TCbwSVG();NSVGimage * __fastcall ParseFromFile(UnicodeString filename, UnicodeString units, double dpi);void __fastcall Rasterize(NSVGrasterizer* r, NSVGimage* image, float tx, float ty, float scale, unsigned char* dst,int w, int h, int stride);NSVGrasterizer * __fastcall NewRasterizer();void __fastcall Free(NSVGrasterizer * r);void __fastcall Free(NSVGimage * image);void __fastcall Free(NSVGparser * parser);int __fastcall Save_Png(UnicodeString filename, int w, int h, int comp, const void *data, int stride_in_bytes);int stbi_write_bmp(char const *filename, int w, int h, int comp, const void *data);int stbi_write_tga(char const *filename, int w, int h, int comp, const void *data);
};

显示Tiger.svg效果

编辑

在DrGraph软件中，无需象专业软件那样编辑SVG，能直观看到效果即可。
SVG文件为xml结构文本内容，可以先将XML转化为TreeView

void __fastcall CbwXmlNode::SaveToTreeNode(TTreeNode * node, UnicodeString textField, int operateKind) { //, bool bindFlag, bool refreshNodeFlag) {TTreeView * treeView = dynamic_cast<TTreeView *>(node->TreeView);if(!treeView)return;UnicodeString firstTextField = THelper::String::GetStringAt(textField, L";", 0);UnicodeString text = AttributeValueByName(firstTextField);TTreeNode * subTreeNode = node;if (text.Length()) {UnicodeString secondTextField = THelper::String::GetStringAt(textField, L";", 1);if(secondTextField.Length() && ContainAttribute(secondTextField)) {secondTextField = AttributeValueByName(secondTextField);if(secondTextField.Length())text = THelper::FormatString(L"%s〖%s〗", text, secondTextField);}} elsetext = GetHint(L"\n", true, DRGRAPH_FLAG_ONLY_MY_ATTRIBUTE);if(operateKind & DRGRAPH_VALUE_REFRESH_THIS_TREENODE)node->Text = text;elsesubTreeNode = treeView->Items->AddChild(node, text);if(operateKind & DRGRAPH_VALUE_BIND_NODEVALUE)subTreeNode->Data = this;operateKind = operateKind & (~DRGRAPH_VALUE_REFRESH_THIS_TREENODE);for (int i = 0; i < ElementNumber; ++i) {CbwXmlNode * subXmlNode = Elements(i);subXmlNode->SaveToTreeNode(subTreeNode, textField, operateKind);}
}

生成目标子集SVG

用户选择TreeView中的某些节点时，应该能及时更新相应显示内容，如

当然，通过临时SVG文件进行中转

void __fastcall TMainForm::TreeView_XmlChange(TObject *Sender, TTreeNode *Node)
{TList * selections = new TList;TreeView_Xml->GetSelections(selections);for(int i = 0; i < TreeView_Xml->Items->Count; ++i)TreeView_Xml->Items->Item[i]->StateIndex = NORMAL_STATE;for(int i = 0; i < selections->Count; ++i) {TTreeNode * node = (TTreeNode *)(selections->Items[i]);if(node->StateIndex == SELECT_STATE)continue;node->StateIndex = SELECT_STATE;TTreeNode * parent = node->Parent;   while(parent) {if(parent->StateIndex == NORMAL_STATE) {    parent->StateIndex = SELECT_STATE;int index = selections->IndexOf(parent);if(index == -1)selections->Insert(i, parent);}parent = parent->Parent;}}UnicodeString info = L"";for(int i = 0; i < selections->Count; ++i) {TTreeNode * node = (TTreeNode *)(selections->Items[i]);info += localGetTreeNodeText(node, selections);}UnicodeString svgFileName = THelper::File::GetPath_Debug() + L"debug.svg";if(FileExists(svgFileName))DeleteFile(svgFileName);THelper::File::SetFileContent(svgFileName, info);UnicodeString fileName = GlobalImageObject->OnCommand(THelper::FormatString(L"<request type='SVG' svgfileName='%s' frameIndex='0' />", svgFileName), "svgfileName");if(FileExists(fileName)) {CBW_CAST(TCbwImage, image, TreeView_Xml->Tag);if(image) {image->RefreshSVG(fileName);image->Dispear();image->Draw();FCurrentForm->RefreshCurrentScreen();}}delete selections;
}

上图示例生成临时SVG为

 <svg version='1.1' viewBox='0 0 900 900' xmlns='http://www.w3.org/2000/svg' ><g fill='none' id='g4' transform='matrix(1.7656463,0,0,1.7656463,324.90716,255.00942)' ><g fill='#cc7226' id='g318' ><path d='m-58.6,14.4s-3.2-21.2-0.8-25.6c0,0,10.8-10,10.4-13.6,0,0-0.4-18-1.6-18.8s-8.8-6.8-14.8-0.4c0,0-10.4,18-9.6,24.4v2s-7.6-0.4-9.2,1.6c0,0-1.2,5.2-2.4,5.6,0,0-2.8,2.4-0.8,5.2,0,0-2,2.4-1.6,6.4l7.6,4s2,14.4,12.8,19.6c4.836,2.329,8-4.4,10-10.4z' id='path320' /></g><g fill='#FFF' id='g322' ><path d='m-59.6,12.56s-2.88-19.08-0.72-23.04c0,0,9.72-9,9.36-12.24,0,0-0.36-16.2-1.44-16.92s-7.92-6.12-13.32-0.36c0,0-9.36,16.2-8.64,21.96v1.8s-6.84-0.36-8.28,1.44c0,0-1.08,4.68-2.16,5.04,0,0-2.52,2.16-0.72,4.68,0,0-1.8,2.16-1.44,5.76l6.84,3.6s1.8,12.96,11.52,17.64c4.352,2.095,7.2-3.96,9-9.36z' id='path324' /></g><g fill='#eb955c' id='g326' ><path d='m-51.05-42.61c-1.09-0.86-8.58-6.63-14.43-0.39,0,0-10.14,17.55-9.36,23.79v1.95s-7.41-0.39-8.97,1.56c0,0-1.17,5.07-2.34,5.46,0,0-2.73,2.34-0.78,5.07,0,0-1.95,2.34-1.56,6.24l7.41,3.9s1.95,14.04,12.48,19.11c4.714,2.27,7.8-4.29,9.75-10.14,0,0-3.12-20.67-0.78-24.96,0,0,10.53-9.75,10.14-13.26,0,0-0.39-17.55-1.56-18.33z' id='path328' /></g><g fill='#f2b892' id='g330' ><path d='m-51.5-41.62c-0.98-0.92-8.36-6.46-14.06-0.38,0,0-9.88,17.1-9.12,23.18v1.9s-7.22-0.38-8.74,1.52c0,0-1.14,4.94-2.28,5.32,0,0-2.66,2.28-0.76,4.94,0,0-1.9,2.28-1.52,6.08l7.22,3.8s1.9,13.68,12.16,18.62c4.594,2.212,7.6-4.18,9.5-9.88,0,0-3.04-20.14-0.76-24.32,0,0,10.26-9.5,9.88-12.92,0,0-0.38-17.1-1.52-17.86z' id='path332' /></g><g fill='#f8dcc8' id='g334' ><path d='m-51.95-40.63c-0.87-0.98-8.14-6.29-13.69-0.37,0,0-9.62,16.65-8.88,22.57v1.85s-7.03-0.37-8.51,1.48c0,0-1.11,4.81-2.22,5.18,0,0-2.59,2.22-0.74,4.81,0,0-1.85,2.22-1.48,5.92l7.03,3.7s1.85,13.32,11.84,18.13c4.473,2.154,7.4-4.07,9.25-9.62,0,0-2.96-19.61-0.74-23.68,0,0,9.99-9.25,9.62-12.58,0,0-0.37-16.65-1.48-17.39z' id='path336' /></g><g fill='#FFF' id='g338' ><path d='m-59.6,12.46s-2.88-18.98-0.72-22.94c0,0,9.72-9,9.36-12.24,0,0-0.36-16.2-1.44-16.92-0.76-1.04-7.92-6.12-13.32-0.36,0,0-9.36,16.2-8.64,21.96v1.8s-6.84-0.36-8.28,1.44c0,0-1.08,4.68-2.16,5.04,0,0-2.52,2.16-0.72,4.68,0,0-1.8,2.16-1.44,5.76l6.84,3.6s1.8,12.96,11.52,17.64c4.352,2.095,7.2-4.06,9-9.46z' id='path340' /></g><g fill='#CCC' id='g342' ><path d='m-62.7,6.2s-21.6-10.2-22.5-11c0,0,9.1,8.2,9.9,8.2s12.6,2.8,12.6,2.8z' id='path344' /></g><g fill='#000' id='g346' ><path d='m-79.8,0s18.4,3.6,18.4,8c0,2.912-0.243,16.331-5.6,14.8-8.4-2.4-4.8-16.8-12.8-22.8z' id='path348' /></g><g fill='#99cc32' id='g350' ><path d='m-71.4,3.8s8.978,1.474,10,4.2c0.6,1.6,1.263,9.908-4.2,11-4.552,0.911-6.782-9.31-5.8-15.2z' id='path352' /></g><g fill='#000' id='g354' ><path d='m14.595,46.349c-0.497-1.742,0.814-1.611,2.605-2.149,2-0.6,14.2-4.4,15-7s14,1.8,14,1.8c1.8,0.8,6.2,3.4,6.2,3.4,4.8,1.2,11.4,1.6,11.4,1.6,2.4,1,5.8,3.8,5.8,3.8,14.6,10.2,27.001,3,27.001,3,19.999-6.6,13.999-23.8,13.999-23.8-3-9,0.2-12.4,0.2-12.4,0.2-3.8,7.4,2.6,7.4,2.6,2.6,4.2,3.4,9.2,3.4,9.2,8,11.2,4.6-6.6,4.6-6.6,0.2-1-2.6-4.6-2.6-5.8s-1.8-4.6-1.8-4.6c-3-3.4-0.6-10.4-0.6-10.4,1.8-13.8-0.4-12-0.4-12-1.2-1.8-10.4,8.2-10.4,8.2-2.2,3.4-8.2,5-8.2,5-2.799,1.8-6.199,0.4-6.199,0.4-2.6-0.4-8.2,6.6-8.2,6.6,2.8-0.2,5.2,4.2,7.6,4.4s4.2-2.4,5.799-3c1.6-0.6,4.4,5.2,4.4,5.2,0.4,2.6-5.2,7.4-5.2,7.4-0.4,4.6-1.999,3-1.999,3-3-0.6-4.2,3.2-5.2,7.8s-5.2,5-5.2,5c-1.6,7.4-2.801,4.4-2.801,4.4-0.2-5.6-6.2,0.2-6.2,0.2-1.2,2-5.8-0.2-5.8-0.2-6.8-2-4.4-4-4.4-4,1.8-2.2,13,0,13,0,2.2-1.6-5.8-5.6-5.8-5.6-0.6-1.8,0.4-6.2,0.4-6.2,1.2-3.2,8-8.8,8-8.8,9.401-1.2,6.601-2.8,6.601-2.8-6.2-5.2-12.001,2.4-12.001,2.4-2.2,6.2-19.6,21.2-19.6,21.2-4.8,3.4-2.2-3.4-6.2,0s-24.6-5.6-24.6-5.6c-11.562-1.193-14.294,14.549-17.823,11.429,0,0,5.418,8.52,3.818,2.92z' id='path356' /></g><g fill='#000' id='g358' ><path d='m209.4-120s-25.6,8-28.4,26.8c0,0-2.4,22.8,18,40.4,0,0,0.4,6.4,2.4,9.6,0,0-1.6,4.8,17.2-2.8l27.2-8.4s6.4-2.4,11.6-11.2,20.4-27.6,16.8-52.8c0,0,1.2-11.2-4.8-11.6,0,0-8.4-1.6-15.6,6,0,0-6.8,3.2-9.2,2.8l-35.2,1.2z' id='path360' /></g><g fill='#000' id='g362' ><path d='m264.02-120.99s2.1-8.93-2.74-4.09c0,0-7.04,5.72-14.52,5.72,0,0-14.52,2.2-18.92,15.4,0,0-3.96,26.84,3.96,32.56,0,0,4.84,7.48,11.88,0.88s22.54-36.83,20.34-50.47z' id='path364' /></g><g fill='#323232' id='g366' ><path d='m263.65-120.63s2.09-8.75-2.66-3.99c0,0-6.92,5.61-14.26,5.61,0,0-14.26,2.16-18.58,15.12,0,0-3.89,26.354,3.89,31.97,0,0,4.75,7.344,11.66,0.864,6.92-6.48,22.11-36.184,19.95-49.574z' id='path368' /></g></g></svg>

在此基础上，可进行SVG元件的属性设计。

DrGraph - SVG模块之一：显示与节点选择相关推荐

  1. Altium AD20分屏显示，交叉选择模式使用，原理图和PCB器件的同步选择

    AD20可以使用 分屏显示 和 交叉选择,实现对元件快速定位.分类.布局的功能,提高设计效率. 原理图.PCB分屏显示 图纸页 - 右键 - 垂直分割.就会变为分屏显示,搭配双屏使用更加舒适. 交叉选 ...

  2. Domoticz加入dht11温湿度模块，显示室内温湿度

    Domoticz加入dht11温湿度模块 前言 刷ESPEasy固件 网页配置8266温湿度参数 Domoticz服务器设置参数 最后看看手机APP上的效果 前言 前几天在Domoticz服务器上添加 ...

  3. 51驱动AS608光学指纹识别模块 12864显示

    51驱动AS608光学指纹识别模块 12864显示 AS608光学指纹识别模块 模块工作原理 1.指纹特征 2.指纹处理 模块参数 引脚说明 实验程序 硬件设备和接线 程序讲解 按键 主函数 实验步骤 ...

  4. 用js在页面中创建svg标签不显示的问题

    问题描述 直接在页面写入SVG,图形正常可以显示, 但是使用js动态创建SVG,添加入DOM节点,页面无法显示SVG图形 原因 SVG是基于XML格式定义图像的一种技术,因此创建节点的时候,需要指定命 ...

  5. 带你开发一个远程控制项目----＞STM32+标准库+阿里云平台+传感器模块+远程显示-------之 MQTT连接阿里云平台

    目录 第一篇: 第二篇: 项目清单 视频验证效果 Android Studio开发介绍 步1:此次需要下载本人开发的MQTT阿里云连接项目 步2:替换阿里云 设备三元信息 查看三元 替换 Androi ...

  6. 带你开发一个远程控制项目----＞STM32+标准库+阿里云平台+传感器模块+远程显示。

    目录 本次实验项目: 下次实验项目: 本次项目视频结果/APP/实物展示 实物展示 APP展示 视频展示 模块选择说明; 温湿度传感器模块介绍 光照传感器介绍 ESP8266-01S模块介绍 本次实验 ...

  7. 爬虫之xpath语法-常用节点选择语法

    爬虫之xpath语法-常用节点选择语法 可以通过通配符来选取未知的html.xml的元素 1.1 选取未知节点的语法 通配符 描述 * 匹配任何元素节点. node() 匹配任何类型的节点. 1.2 ...

  8. Devexpress TreeList控件绑定显示父子节点对像

    今天一位同事咨询Devexpress TreeList控件绑定自动显示父子节点对像,但结果是不会显示带父子节点关系,而是将所有的节点作为父节点显示出来了,对像类的代码如下 public class I ...

  9. 蓝桥杯节点选择(java)第一道树形dp分析

    蓝桥杯 节点选择 问题描述 有一棵 n 个节点的树,树上每个节点都有一个正整数权值.如果一个点被选择了,那么在树上和它相邻的点都不能被选择.求选出的点的权值和最大是多少? 输入格式 第一行包含一个整数 ...

  10. boost::signals2模块实现显示插槽通过接口传递的示例程序

    boost::signals2模块实现显示插槽通过接口传递的示例程序 实现功能 C++实现代码 实现功能 boost::signals2模块实现显示插槽通过接口传递的示例程序 C++实现代码 #inc ...

最新文章

  1. win8 metro 拖拽重排grid
  2. 《Java 核心技术卷1 第10版》学习笔记------对象克隆【对象拷贝】
  3. pythonspark实例_spark+python快速入门实战小例子(PySpark)
  4. 如何给Linux操作系统(CentOS 7为例)云服务器配置环境等一系列东西
  5. LeetCode 785. 判断二分图（染色法）
  6. php项目的建立,PHP开发-ZendStudio初学教程-建立PHP项目
  7. 挨批评了！Chrome 对用户隐私保护还不如 IE？
  8. CISSP第一章：安全与风险管理知识点
  9. Dev-cpp5.4.0安装及下载
  10. 三种方法帮你恢复删除的文件
  11. 你不能访问此共享文件夹,因为你组织的安全策略的解决办法
  12. 普通糖尿病人1周食谱
  13. 各大开源项目中的GA的意思？
  14. UE4 坐标系坐标轴旋转轴
  15. 全国第17届计算机辅助设计与图形学(cad/cg)学术会议论文集,征稿资讯-CCF第24届全国计算机辅助设计与图形学学术会议 (CCF CAD/CG 2021)...
  16. cocos制作水滴粘连效果
  17. 金仓数据库KingbaseES GIN 索引
  18. 考工信部计算机中级证多少钱,软考中级证书有效期
  19. gstreamer学习笔记---pad定义、连接、流动
  20. 5G、智能物联网和边缘计算讲座总结

热门文章

  1. 关于Single Image Super Resolution（单幅影像超分辨率重建任务）Bicubic_LRX4影像生成的‘搬运‘想法
  2. mysql判断用户名和密码是否正确_怎样分别判断用户名和密码是否正确
  3. 语义分割算法性能比较_汇总|3D点云分割算法
  4. 智能制造，从smart到intelligent
  5. 易飞计件工资的设计及应用
  6. Android隐藏app桌面图标
  7. office之自定义尾注样式：中括号的应用
  8. 液晶电视面板的类型、等级及鉴别方法
  9. edge浏览器网页翻译失败解决方法
  10. win10图片打不开无法注册包