当前位置：首页 > news >正文

kanzi3.6.10 窗口插件-网页生成界面

news 2025/7/26 16:25:01

文章目录

1. 插件设计
2. 插件实现
3. 运行插件
4. 结论

背景：设计师用Sketch设计界面原型，导出html格式给开发人员。程序员会根据UI实现kanzi界面。这个过程的问题是程序员需要仔细把UI原型转换为kanzi界面的相应节点，繁琐的设置坐标、宽高、字体等等。希望有个工具能自动把UI原型转换为kanzi界面。

工作流
在这里插入图片描述

1. 插件设计

在这里插入图片描述

2. 插件实现

窗口插件的创建，请参考 https://blog.csdn.net/chen_227/article/details/144720596

c#界面如下
在这里插入图片描述
open选择html

private void Button_Open_Click(object sender, RoutedEventArgs e){// 创建一个OpenFileDialog实例OpenFileDialog openFileDialog = new OpenFileDialog();// 设置过滤器，只显示HTML文件openFileDialog.Filter = "HTML Files (*.html)|*.html|All Files (*.*)|*.*";openFileDialog.FilterIndex = 1; // 默认显示HTML文件// 显示对话框if (openFileDialog.ShowDialog() == true){// 获取选择的文件路径string filePath = openFileDialog.FileName;HtmlPathText = filePath;

// 使用JsonDocument解析JSON字符串
JsonDocument doc = JsonDocument.Parse(jsonString);
JsonElement root = doc.RootElement;

创建layer

Screen screen = studio.ActiveProject.Screen;
Node2D rootNode2D = screen.RootNode2D;
var node = studio.ActiveProject.CreateProjectItem<EmptyNode2D>(
rootNode2D.GenerateUniqueChildName(name), rootNode2D);HandleJsonDataLayers(node, layers);

创建文字节点

var textblock2d = studio.ActiveProject.CreateProjectItem<TextBlock2D>(
parent.GenerateUniqueChildName("text_" + name), parent);

设置节点属性

textblock2d.Set(textblock2d.PropertyTypes.TextBlockConceptText, content);
textblock2d.Set(textblock2d.PropertyTypes.TextBlockConceptFontSize, fontSize);
ResourceReference<FontFile> newFontReference = new ResourceReference<FontFile>(fontFile);textblock2d.Set(textblock2d.PropertyTypes.NodeFont, newFontReference);
textblock2d.Set(textblock2d.PropertyTypes.Node2DRenderTransformation, tran);textblock2d.Set(textblock2d.PropertyTypes.NodeWidth, width);
textblock2d.Set(textblock2d.PropertyTypes.NodeHeight, height);textblock2d.Set(textblock2d.PropertyTypes.NodeOpacity, (float)opacity);