1

我有一个应用程序向用户呈现 SVG 图像，他们需要根据呈现的内容填写两个编辑字段。由于该过程需要重复多次，我的结论是，如果用户交互只需要键盘，那么对于速度和效率来说是最好的。为此，我必须确保几件事：

  1. 那个数字是焦点。
  2. 那Tab ⭾</kbd> cycles the elements in the correct order (edit1 → edit2 → button).
  3. 每当刷新图像时，都会聚焦正确的编辑字段。

第一个要求可以通过切换图形可见性来满足，如此处所述。
第二个要求也很容易实现，只需要以特定顺序定义图形元素，如这里（针对uifigures）和这里（针对图形）所讨论的。

我的困难在于第三个要求，特别是 - 我不知道如何确保所需的编辑字段在需要时得到关注。请考虑以下类以供参考，其中focusControl方法只是一个占位符。

classdef SVGAxisLimit < handle
  
  properties (GetAccess = private, SetAccess = immutable)
    hF (1,1)
    hI (1,1) matlab.ui.control.Image
    hLL (1,1) matlab.ui.control.NumericEditField
    hRL (1,1) matlab.ui.control.NumericEditField
    hDone (1,1) matlab.ui.control.Button
  end
  
  methods    
    function obj = SVGAxisLimit()
      % Create figure:
      hF = uifigure('WindowState','maximized','Color','w'); drawnow;
      
      % Create image:      
      hI = uiimage(hF, 'Position', [1,100,hF.Position(3),hF.Position(4)-100]);
      
      % Create controls:
      uilabel(hF, 'HorizontalAlignment', 'left', 'Position', [600 20 150 42],...
        'Text', 'Left Limit:', 'FontSize', 22);
     
      % Create LeftLimitEditField
      hLL = uieditfield(hF, 'numeric', 'Position', [710 20 80 42], 'FontSize', 22);

      % Create RightLimitEditFieldLabel
      uilabel(hF, 'HorizontalAlignment', 'left', 'Position', [900 20 150 42],...
        'Text', 'Right Limit:', 'FontSize', 22);

      % Create RightLimitEditField
      hRL = uieditfield(hF, 'numeric', 'Position', [1025 20 80 42], 'FontSize', 22);

      % Create DoneButton
      hDone = uibutton(hF, 'push', 'Text', 'Done', 'Position', [1200 20 80 42], ...
        'FontWeight', 'bold', 'FontSize', 22, 'ButtonPushedFcn', @(varargin)uiresume(hF));
      
      % Store handles:
      obj.hF = hF;
      obj.hI = hI;
      obj.hLL = hLL;
      obj.hRL = hRL;
      obj.hDone = hDone;
    end    
  end
  
  methods (Access = public)
    function [realLims] = showSVG(salObj, svgPath)
      salObj.hI.ImageSource = svgPath;
      % Focus left edit field
      SVGAxisLimit.focusControl(salObj.hLL);
      % Wait for a click on "done"
      uiwait(salObj.hF);
      % When resume, capture values:
      realLims = [salObj.hLL.Value, salObj.hRL.Value];
    end
  end  
  
  methods (Access = private, Static = true)
    function [] = focusControl(hObject)
      % hObject is the handle of the uicontrol which needs to be focused
      % ???
    end
  end
end

我正在使用 MATLAB R2020a。

附言

我决定为此使用 uifigures，因为它们的uiimage组件本身就支持 SVG 的呈现（尽管存在避免该组件的变通方法）。

4

1 回答 1

1

看到 aUIFigure主要是一个网页，事实证明 和 的 JavaScript Web API 方法在.focus()这里.select()很有用。剩下的唯一困难是找到某种方法来引用有问题的 Web 元素（小部件）。幸运的是， R2020a中与编辑字段对应的 HTML 元素由一个唯一id属性标识，这使得使用非常简单的DOM命令（例如getElementById. 总之：

function [] = focusControl(hObject)
  % hObject is the handle of the uicontrol which needs to be focused
  [hWin, widgetID] = mlapptools.getWebElements(hObject);
  hWin.executeJS(sprintf(...
    'W = document.getElementById("%s"); W.focus(); W.select();', widgetID.ID_val));
end

mlapptools可以在哪里找到（披露：我是该实用程序的合著者）。

于 2020-06-24T08:53:17.520 回答