 | |  |  | AIWROK软件苹果IOS线条实作简单示例
- // Line类使用示例,交流QQ群711841924
- // 这个示例展示如何创建Line对象并使用setWidth、setHeight和setColor方法
- // 1. 创建视图容器
- var vc = new IOSView();
- // 2. 显示视图并在回调中创建和配置线条
- vc.show(() => {
- // 获取当前视图
- var view = vc.getView();
-
- // 3. 创建Line对象
- var line = new Line();
-
- // 4. 使用setWidth方法设置线条宽度为5
- line.setWidth(5.0);
-
- // 5. 使用setHeight方法设置线条高度为2
- line.setHeight(2.0);
-
- // 6. 使用setColor方法设置线条颜色为红色
- line.setColor(255, 0, 0);
-
- // 7. 设置线条的位置
- // 假设我们有setPosition方法来设置线条的位置
- // 注意:这里使用了假设的方法,实际使用时请根据API文档调整
- if (typeof line.setPosition !== 'undefined') {
- line.setPosition(100, 200); // 设置线条左上角位置为(100, 200)
- }
-
- // 8. 将线条添加到视图中
- view.addView(line);
-
- // 9. 打印信息,确认操作完成
- printl("已创建红色线条,宽度: 5, 高度: 2");
-
- // 10. 创建更多线条进行演示
- // 创建一条蓝色线条
- var blueLine = new Line();
- blueLine.setWidth(3.0);
- blueLine.setHeight(1.0);
- blueLine.setColor(0, 0, 255);
- if (typeof blueLine.setPosition !== 'undefined') {
- blueLine.setPosition(100, 250);
- }
- view.addView(blueLine);
-
- // 创建一条绿色线条
- var greenLine = new Line();
- greenLine.setWidth(8.0);
- greenLine.setHeight(3.0);
- greenLine.setColor(0, 255, 0);
- if (typeof greenLine.setPosition !== 'undefined') {
- greenLine.setPosition(100, 300);
- }
- view.addView(greenLine);
-
- printl("已创建多条不同颜色和尺寸的线条");
- });
- // 注意:
- // 1. 示例中的setPosition方法是假设的,实际使用时请根据API文档调整
- // 2. 线条的显示效果可能因实际的视图渲染机制而有所不同
- // 3. 如需关闭视图,可以调用vc.dismiss()方法
复制代码- // Line类使用示例,交流QQ群711841924
- // 这个示例展示如何创建Line对象并使用setWidth、setHeight和setColor方法
- // 1. 创建视图容器
- var vc = new IOSView();
- // 2. 存储所有创建的线条,用于后续操作
- var allLines = [];
- // 3. 辅助函数:创建并返回一个带图标的按钮
- function createIconButton(title, iconColor, buttonColor) {
- var container = new Vertical();
-
- // 创建图标占位符(使用Button模拟)
- var icon = new Button();
- icon.setColor(iconColor[0], iconColor[1], iconColor[2]);
- icon.setWidth(30);
- icon.setHeight(30);
- container.addView(icon);
-
- // 创建文本标签
- var label = new Label();
- label.setText(title);
- label.setTextColor(0, 0, 0);
- container.addView(label);
-
- // 创建按钮背景
- var button = new Button();
- button.setColor(buttonColor[0], buttonColor[1], buttonColor[2]);
- button.setWidth(80);
- button.setHeight(70);
-
- // 将按钮的onClick方法代理到容器
- container.onClick = function(callback) {
- button.onClick(callback);
- };
-
- container.addView(button);
- return container;
- }
- // 4. 显示视图并在回调中创建和配置线条、按钮和图标
- vc.show(() => {
- // 获取当前视图
- var view = vc.getView();
-
- // 5. 创建一个水平容器用于放置按钮
- var buttonContainer = new Horizontal();
-
- // 6. 创建关闭视图按钮
- var closeButton = new Button();
- closeButton.setText("关闭");
- closeButton.setColor(255, 0, 0);
- closeButton.setTextColor(255, 255, 255);
- closeButton.setWidth(80);
- closeButton.onClick(() => {
- printl("视图已关闭");
- vc.dismiss();
- });
- buttonContainer.addView(closeButton);
-
- // 7. 创建新线条按钮
- var newLineButton = new Button();
- newLineButton.setText("新线条");
- newLineButton.setColor(0, 0, 255);
- newLineButton.setTextColor(255, 255, 255);
- newLineButton.setWidth(80);
- newLineButton.onClick(() => {
- // 创建随机颜色的新线条
- var randomLine = new Line();
- randomLine.setWidth(Math.random() * 10 + 2);
- randomLine.setHeight(Math.random() * 5 + 1);
- randomLine.setColor(
- Math.floor(Math.random() * 255),
- Math.floor(Math.random() * 255),
- Math.floor(Math.random() * 255)
- );
-
- if (typeof randomLine.setPosition !== 'undefined') {
- // 在随机位置创建线条
- var xPos = Math.floor(Math.random() * 300) + 50;
- var yPos = Math.floor(Math.random() * 300) + 150;
- randomLine.setPosition(xPos, yPos);
- }
-
- view.addView(randomLine);
- allLines.push(randomLine);
- printl("已创建新线条,当前线条总数: " + allLines.length);
- });
- buttonContainer.addView(newLineButton);
-
- // 8. 创建清除按钮
- var clearButton = new Button();
- clearButton.setText("清除");
- clearButton.setColor(128, 128, 128);
- clearButton.setTextColor(255, 255, 255);
- clearButton.setWidth(80);
- clearButton.onClick(() => {
- // 移除所有线条
- for (var i = 0; i < allLines.length; i++) {
- view.removeView(allLines[i]);
- }
- allLines = [];
- printl("已清除所有线条");
- });
- buttonContainer.addView(clearButton);
-
- // 9. 将按钮容器添加到视图顶部
- view.addView(buttonContainer);
-
- // 10. 创建带图标的操作按钮
- var iconContainer = new Horizontal();
-
- // 红色线条图标按钮
- var redLineIcon = createIconButton("红色", [255, 0, 0], [255, 200, 200]);
- redLineIcon.onClick(() => {
- var redLine = new Line();
- redLine.setWidth(5.0);
- redLine.setHeight(2.0);
- redLine.setColor(255, 0, 0);
-
- if (typeof redLine.setPosition !== 'undefined') {
- redLine.setPosition(100, 200);
- }
-
- view.addView(redLine);
- allLines.push(redLine);
- printl("已创建红色线条");
- });
- iconContainer.addView(redLineIcon);
-
- // 蓝色线条图标按钮
- var blueLineIcon = createIconButton("蓝色", [0, 0, 255], [200, 200, 255]);
- blueLineIcon.onClick(() => {
- var blueLine = new Line();
- blueLine.setWidth(5.0);
- blueLine.setHeight(2.0);
- blueLine.setColor(0, 0, 255);
-
- if (typeof blueLine.setPosition !== 'undefined') {
- blueLine.setPosition(200, 200);
- }
-
- view.addView(blueLine);
- allLines.push(blueLine);
- printl("已创建蓝色线条");
- });
- iconContainer.addView(blueLineIcon);
-
- // 绿色线条图标按钮
- var greenLineIcon = createIconButton("绿色", [0, 255, 0], [200, 255, 200]);
- greenLineIcon.onClick(() => {
- var greenLine = new Line();
- greenLine.setWidth(5.0);
- greenLine.setHeight(2.0);
- greenLine.setColor(0, 255, 0);
-
- if (typeof greenLine.setPosition !== 'undefined') {
- greenLine.setPosition(300, 200);
- }
-
- view.addView(greenLine);
- allLines.push(greenLine);
- printl("已创建绿色线条");
- });
- iconContainer.addView(greenLineIcon);
-
- // 将图标容器添加到视图
- view.addView(iconContainer);
-
- printl("示例已加载完成,您可以通过按钮创建和管理线条");
- });
- // 注意:
- // 1. 示例中的setPosition方法是假设的,实际使用时请根据API文档调整
- // 2. 线条的显示效果可能因实际的视图渲染机制而有所不同
- // 3. 如需关闭视图,可以调用vc.dismiss()方法
复制代码
| |  | |  |
|