SketchUp 插件 HTML 界面交互

最编程 2024-03-21 21:59:16

...

上一章节我们用inputbox方法做了个简单的UI

现在我们用html来制作它

先来看一下效果：

在这部分中重点在于js与ruby后台的通信

js传值代码：

sketchup.confirm(data_arr); //数据传输到ruby后台

ruby接受数据代码：

dialog.add_action_callback("confirm") { |action, params|  # param即js传过来的值  create_cube(params)}

上面主要通过confirm标识来通信，所以一定要保证前后端这个标识一致

完整代码

cube.html代码：

<html>  <head>      <meta charset="UTF-8"/>    <title>立方体工具</title>        <style>      body{        background-color: #f0f0f0;        width: 230px;        height: 200px;      }</style>  </head>     <body>    <div>      <div>长度：<input id="cd" type="text" value="1000"></div><br/>      <div>宽度：<input id="kd" type="text" value="1000"></div><br/>      <div>高度：<input id="gd" type="text" value="1000"></div><br/>      <div>材质：      <select id="cz">        <option value="red">red</option>        <option value="yellow">yellow</option>        <option value="purple">purple</option>      </select>      </div>    </div>    <div style="float: right; margin-right: 10px;">      <input type="button" value="确定" onclick="confirm()">      <input type="button" value="取消" onclick="cancel()">    </div>  </body>  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  <script>    function confirm(){      var cd = $("#cd").val();      var kd = $("#kd").val();      var gd = $("#gd").val();      var cz = $("#cz option:selected").text()      var data_arr = [cd, kd, gd, cz]      sketchup.confirm(data_arr); //数据传输到ruby后台    }    function cancel(){      sketchup.cancel();    }</script></html>

cube.rb代码：

class Cube    def self.create_cube(input)    model = Sketchup.active_model    model.start_operation('Create Cube', true)    # 创建信息输入框        #    if input      vue = [input[0].to_f.mm,input[1].to_f.mm,input[2].to_f.mm]      v = vue.find{|v| v if v==0}      # 判断输入值是否有效，messbox提示      res = UI.messagebox("在输入的长、宽、高中存在不合法数值", MB_OK) if v      return if res      group = model.active_entities.add_group        entities = group.entities      points = [        Geom::Point3d.new(0,   0,   0),        Geom::Point3d.new(input[0].to_f.mm, 0,   0),        Geom::Point3d.new(input[0].to_f.mm, input[1].to_f.mm, 0),        Geom::Point3d.new(0,   input[1].to_f.mm, 0)      ]      face = entities.add_face(points)      face.reverse! unless face.normal.samedirection? Z_AXIS         face.pushpull(input[2].to_f.mm)        group.material = input[-1]    end        model.commit_operation    end
    def self.create_dialog    dialog = UI::HtmlDialog.new(    {      :dialog_title => "立方体工具",      :preferences_key => "",      :scrollable => true,      :resizable => true,      :width => 260,      :height => 260,      :left => 100,      :top => 100,      :min_width => 50,      :min_height => 50,      :max_width =>1000,      :max_height => 1000,      :style => UI::HtmlDialog::STYLE_DIALOG    })    dialog.set_file File.join(File.dirname(__FILE__), 'cube_ui/cube.html')    dialog.show    dialog.add_action_callback("confirm") { |action, params|      # params即js传过来的值      create_cube(params)    }    dialog.add_action_callback("cancel"){      dialog.close    }    endend

这只是一个简单的demo，有了HtmlDialog方法可以做更复杂更漂亮的操作界面。

这章节更新的比较慢，因为最近很忙。恰好最近在做一个项目，看效果：

这个效果与立体工具插件无关，在这主要告诉大家在SketchUp中界面可以很丰富，主要是vue实现

感兴趣的小伙伴点击关注。需要源码的伙伴后台消息。

上一篇：蓝桥杯第 14 届模拟赛最大连接分块 (dfs)

下一篇：使用