Special interface controls

数字输入框内计算功能

Krita 可以在数字输入框中直接进行简单的数学计算。除了基本的数字输入框外,选中数字调整框的数字、或者在滑动条上右键点击时也可以激活数字输入功能。目前 Krita 还不能进行单位转换,不过我们计划实现这项功能。

可用函数

加法 ( 运算符:+ )

把数字相加。用法:50+100 输出: 150

减法 ( 运算符:- )

用前一个数字减去后一个数字。用法:50-100 输出:50

乘法 ( 运算符:* )

把各数字相乘。用法:50*100 输出:5000

除法 ( 运算符:/ )

从前一个数字中除去后一个数字。用法:50/100 输出:0.5

乘方 ( 运算符:^ )

把后一个数字作为前一个数字的指数并求出结果。用法:2^8 输出:256

正弦 (运算符:sin() )

求给定角度的正弦值。用法:sin(50) 输出:0.76

余弦 ( 运算符:cos() )

求给定角度的余弦值。用法:cos(50) 输出:0.64

正切 ( 运算符:tan() )

求给定角度的正切值。用法:tan(50) 输出:1.19

反正弦 ( 运算符:asin() )

正弦的反函数,求给定正弦值的角度。用法:asin(0.76) 输出:50

反余弦 ( 运算符:acos() )

余弦的反函数,求给定余弦值的角度。用法:acos(0.64) 输出:50

反正切 ( 运算符:atan() )

正切的反函数,求给定正切值的角度。用法:atan(1.19) 输出:50

绝对值 ( 运算符:abs() )

求给定值的非负值。用法:abs(75-100) 输出:25

指数函数 ( 运算符:exp() )

求给定值应用到值 e 上的指数函数。用法:exp(1) 输出:2.7183

自然对数 ( 运算符:ln() )

求给定值的自然对数,它是 exp () 的反函数。用法:ln(2) 输出:0.6931

Krita 在技术上支持下列函数,但存在程序问题:

常用对数 ( 运算符:log10() )

求给定值的对数。用法:log10(50) 输出:0.64

运算顺序

Krita 采用国际通用的运算顺序规则。以下面的这条数学表达式为例:

2+3*4

在没有任何规则的情况下,这条表达式可以有两种解读方式。你可以把这条表达式解读为 2+3 = 5,然后 5*4 =20。你也可以把它解读为 3*4 = 12,然后 2+12 = 14。

Krita 的运算顺序是:乘方、乘除、加减。因此在上面的例子中,Krita 会先进行进行乘法运算,然后进行加法运算,得到的结果是 14。

我们还可以使用括号来规定运算的先后顺序。要在上面的例子中得到 20,我们可以对表达式进行如下修改:

( 2+3 )*4

Krita 会在解读表达式时把括号考虑在内,因此会得出 20 的结果。

错误提示

在某些情况下,运算的结果会变成红色。这意味着你的表达式有问题,Krita 无法对其进行解析。点击输入框重新输入即可。

Slider

Krita uses these to control values like brush size, opacity, flow, Hue, Saturation, etc… Below is an example of a Krita slider.

../_images/Krita_Opacity_Slider.png

The total range is represented from left to right and the colored bar gives an indication of where in the possible range the current value is. Clicking anywhere, left or right, of that slider will change the current number to something lower (to the left) or higher (to the right). You can also use Down or Left, to decrease the value, and Up or Right to increase it.

Some sliders may have a soft range to choose from, in addition to the full range. The soft range is a sug-range formed by the most common values in the full range. When a slider has the ability to toggle between the full range and the sub-range then a small button with a circle icon is shown to the side of the increase/decrease buttons. Clicking that button will toggle between full range and sub-range.

To input a specific number with the keyboard, hold mouseleft on, mouseright the slider, press Enter, or press a number key. A number can now be entered directly for even greater precision. This control is also a maths input, so you can enter complex mathematical expressions. To commit the new value, press Enter. To cancel the editing without committing and returning to the value that was set before entering the editing mode, press Escape.

Pressing the Shift key while dragging the slider changes the values at a smaller increment, and pressing the Ctrl key while dragging the slider will snap the value to the nearest value step (the exact value step may vary from slider to slider).

在 5.1 版本发生变更: Shift while dragging will now also enable “relative mode”, which means that the cursor can be dragged outside the slider area.

Angle Selector

Krita uses these to control values thar represent some angle or rotation. Below is an example of a Krita angle selector.

../_images/Krita_Angle_Selector.png

The angle selector uses degrees as units and is composed of three parts: a circular gauge, an maths input and some shortcut actions to easily flip and reset the angle.

You can mouseleft and drag on the circular gauge to set a new angle on an intuitive way. The new angle is computed from the relative position of the cursor with respect to the center of the gauge and, by default, if the mouse cursor if far from the gauge, it can be any value, even with decimals (if supported), but if the mouse cursor remains close enough to the gauge when dragging around, the angle will snap to multiples of fifteen degrees. This makes it easier to set the angle in different ways with just the mouse or pen. This default behavior can be altered by using keyboard modifiers: if the Ctrl key is pressed while dragging, then the angle will always be snapped to multiples of fifteen degrees, no matter the distance from the cursor to the gauge; if the Shift key is pressed while dragging, then the angle will never be snapped, no matter the distance from the cursor to the gauge; if both the Ctrl and Shift keys are pressed while dragging, the angle will be snapped to integer values (useful only when the angle selector allows decimal values).

The maths input allows you to set the angle in a more precise fashion.

There are some actions that allow to flip the angle horizontally, vertically, or both, and another that resets the angle to some default value (usually zero degrees). These actions can be accessed in different ways. Most of the times, there will be three buttons to the side to quickly flip the angle. But, when there is no enough space in the user interface, those may be put together in the form of a menu under a single dropdown button, or even be hidden completely, leaving only the circular gauge and the maths input visible. Nevertheless, the actions will be always accessible by right clicking the circular gauge. Also, one can reset the angle by double mouseleft on the gauge.

Curve editor

Krita uses these to edit curves that control different properties of the brushes and some filters, among others. Below is an example of a Krita curve editor used in the color adjustment curves filter.

../_images/Color-adjustment-curve.png

Curves can be edited by defining a small number of points in the editing window. These points create a curve where the curve has to pass smoothly (without creating any sharp corners) through all the points, unless the given point is marked as a corner. If the curve has control points that are marked as corner then the smoothness constrain won’t apply at that specific point, allowing for sharp turns in the curve.

../_images/curve_knot_types.png

An illustration of the difference between smooth and corner/sharp control points. The curve is painted in green with control points painted in red. Left: the curve with all the control points set to smooth. Right: The same curve but with the third point set as corner/sharp.

To select a control point you have to mouseleft on top of one, and then, to change its position, you drag the mouse. When you click, if there is no control point below the cursor, then a new one is created there and immediately selected and grabbed. If you are moving a control point but you don’t like the changes you can press the Escape key to cancel the editing. The point will return to the position where it was before being dragged.

If the Ctrl key was pressed when clicking on a control point, then its smooth/sharp property is toggled. If the Ctrl key was pressed but there was no control point under the cursor when clicking, then the newly added control point is automatically set as corner/sharp. Another way of toggling the smooth/sharp property is by first selecting the control point and then pressing the S key.

If you drag a control point outside the curve control, then it is removed. If you don’t release the mouse button after the removal, you can still drag the mouse inside the control so that the point is recovered. But, if you did release the mouse button, then the control point is not recoverable. You can also remove a control point by first selecting it and then pressing the Delete or Backspace keys.

By pressing the A key a new point will be inserted exactly in the middle of the curve.

Gradients

As discussed in 渐变, Krita has two gradient types: Segmented Gradients and Stop Gradients. Although each type requires a different kind of editor, due to the distinct properties of each one, the main usage is similar.

Stop Gradient Editor

Following is a breakdown of the stop gradient editor:

../_images/stop_gradient_editor_breakdown.png
  1. Name text field - In this text field you can write a name for the gradient.

  2. Select stop - With these arrow buttons you can select the previous or next stop.

  3. Selected stop label - This label shows the currently selected stop index.

  4. Delete stop - With this button you can delete the currently selected stop.

  5. Gradient slider - This slider is the main part of the editor, where the gradient preview is shown and where you can perform some basic operations to change the gradient:

    • mouseleft on the gradient to add a stop.

    • mouseleft on the stop handles (the drop-shaped icons) to select a stop, and drag to move them.

    • Drag the stop handles outside of the bar or press Delete key to remove the selected stop.

    • Double-mouseleft on a stop handle or press Enter key to open a color dialog where you can choose the color of the stop.

    • Use the mousescroll or the Left and Right keys to move the selected stop. If you also press Shift key the increment will be smaller.

    • Use Ctrl + mousescroll or Ctrl + Left and Ctrl + Right shortcuts to select the previous or next stop.

  6. Color type - With these three buttons you can select the type of color used by the selected stop (Foreground, Background or custom).

  7. Color button - If the selected stop uses a custom color then you can use this button to open a color dialog and change the color.

  8. Flip gradient - With this button you can reverse the order of the stops in the gradient.

  9. Sort stops by value - Clicking this button will sort the stops by its value.

  10. Distribute stops evenly - Clicking this button will space the stops leaving the same amount of space between them.

  11. Sort stops by hue - Clicking this button will sort the stops by its hue.

  12. Opacity slider - If the selected stop uses a custom color then you can use this slider to change its opacity.

  13. Position slider - This slider allows to fine-tune the position of the selected stop.

Segmented Gradient Editor

The segmented gradient editor is very similar to the stop gradient editor. The main difference is that you can select three different types of handles to edit the gradient: segment, stop, and middle point handles. When selecting one of these handles the widgets around the gradient slider will change to reflect the actions that you can perform on that handle. For example, for a segment handle you can change the start and end colors (amongst other actions), but for a middle point handle you can only change its position.

Following are a general breakdown and three specific breakdowns of the editor corresponding to the different user interfaces that are presented when the different handles are selected.

General UI Breakdown
../_images/segment_gradient_editor_general_breakdown.png
  1. Name text field - In this text field you can write a name for the gradient.

  2. Select handle buttons - With these arrow buttons you can select the previous or next handle.

  3. Selected handle label - This label shows the currently selected handle index.

  4. Handle actions area - In this area will appear some actions you can perform on the selected handle. They vary depending on the type of handle selected.

  5. Flip gradient - With this button you can reverse the order of the segments (and their start and end colors) in the gradient.

  6. Distribute segments evenly - Clicking this button will make all the segments have the same amount of space.

  7. Gradient slider - This slider is the main part of the editor, where the gradient preview is shown and where you can perform some basic operations to change the gradient. These operations basically make changes to the different handles and are explained in the following sections. You can change the selected handle by pressing Ctrl key and using mousescroll or by pressing Ctrl + Left and Ctrl + Right shortcuts.

  8. Handle properties area - In this area will appear some widgets you can use to change the different properties of the selected handle.

Segment Handle UI Breakdown

../_images/segment_gradient_editor_segment_handle_breakdown.png
  1. Delete segment - Pressing this button will delete the selected segment (unless it is the only one).

  2. Flip segment - Pressing this button you can reverse the start and end colors of the selected segment as well as its middle point.

  3. Split segment - Pressing this button will divide the selected segment in two, using the segment middle point as the cutting position.

  4. Duplicate segment - Pressing this button will create a copy of the selected segment to its right.

  5. Gradient slider - Here is a list of the segment related actions you can perform on the gradient slider:

    • You can select a segment by mouseleft on an area of the slider where there is no stop handle (the drop-shaped icon) or middle point handle (the rhombus-shaped icon).

    • You can move the whole segment by mouseleft and dragging on an area of the slider where there is no stop handle or middle point handle. You can also move the segment by using mousescroll or Left and Right keys and while doing that, if you also press Shift key, then the increment will be smaller. The first and last segments can not be moved.

    • You can delete the selected segment by pressing Delete key or by dragging it outside the slider area.

    • You can split a segment by pressing Ctrl + mouseleft shortcut on it. The cutting point will be where you clicked.

    • You can duplicate a segment by pressing Shift + mouseleft shortcut on it.

  6. Left color - In this row of widgets you can change the properties related to the start of the segment:

    • With the first three buttons you can set the type of color used (Foreground, Background or custom).

    • Next to the color type buttons will appear a check box when the color type is Foreground or Background that you can use to establish that the color should also be transparent. If the color type is custom, then instead a color button and an opacity slider will appear to let you choose a specific color.

    • Lastly there is a position slider you can use to fine-tune the start position of the segment. This also changes the end position of the previous segment.

  7. Right color - In this row of widgets you can change the properties related to the end of the segment. They are pretty much the same as the ones explained in the previous point.

  8. Interpolation - In this row you can set the interpolation method and color model used to blend the colors inbetween the segment.

Stop Handle UI Breakdown

Keep in mind that a segmented gradient is just a list of gradient segments. There isn’t really a concept of stop associated with it. The stop handles are just a convention used in the editor to ease the editing of the gradient. When manipulating or changing the properties of a stop handle you are really modifying the end of the segment on the left and the start of the segment on the right synchronously.

../_images/segment_gradient_editor_stop_handle_breakdown.png
  1. Delete stop - Pressing this button will delete the selected stop. Under the hood this action will merge the left and right segments, keeping the start of the left segment and the end of the right segment.

  2. Center stop - Pressing this button will center the stop between the start position of the left segment and the end position of the right segment.

  3. Gradient slider - Here is a list of the stop related actions you can perform on the gradient slider:

    • You can select a stop handle by mouseleft on one of the drop-shaped icons.

    • You can move the stop handle by mouseleft and dragging the drop-shaped icon. You can also move the stop handle by using mousescroll or Left and Right keys and while doing that, if you also press Shift key, then the increment will be smaller. The first and last stop handles can not be moved.

    • You can delete the selected stop by pressing Delete key or by dragging it outside the slider area.

    • You can create a new stop by pressing Ctrl + mouseleft shortcut on an area of the slider where there is no stop handle or middle point handle. This is exactly the same action as splitting a segment.

  4. Left Color - In this row of widgets you can change the properties related to the end of the segment on the left of the stop:

    • With the first three buttons you can set the type of color used (Foreground, Background or custom).

    • Next to the color type buttons will appear a check box when the color type is Foreground or Background that you can use to establish that the color should also be transparent. If the color type is custom, then instead a color button and an opacity slider will appear to let you choose a specific color.

  5. Right color - In this row of widgets you can change the properties related to the start of the segment on the right of the stop. They are pretty much the same as the ones explained in the previous point.

  6. Link colors - If this button is checked then changing the properties on the left color area will also change the properties on the right color area and vice versa. Check it if you want the two colors to be synchronized.

  7. Position - you can use this slider to fine-tune the position of the stop. This changes the end position of the segment on the left and the start position of the segment on the right.

Middle Point Handle UI Breakdown

../_images/segment_gradient_editor_midpoint_handle_breakdown.png
  1. Center middle point - Pressing this button will center the middle point of the selected segment.

  2. Gradient slider - Here is a list of the middle point related actions you can perform on the gradient slider:

    • You can select a segment middle point by mouseleft on one of the rhombus-shaped icons.

    • You can move the middle point by mouseleft and dragging the rhombus-shaped icon. You can also move it by using mousescroll or Left and Right keys and while doing that, if you also press Shift key, then the increment will be smaller.

  3. Position - With this slider you can fine-tune the position of the middle point of the segment.

Compact Gradient Editors

In some places in the GUI a compact version of the gradient editors may be used because of the lack of space or other reasons. They just show the gradient slider and all the other functionality that is exposed in the non-compact mode is compacted and moved to the side.

../_images/compact_stop_gradient_editor.png

Generic Gradient Editor

In some places you will find that the previously mentioned gradient preset chooser and editors are shown together and that they are interconnected. When this happens, you are probably using the generic gradient editor, that was introduced to ease the creation and manipulation of gradients.

Its main features are:

  • Allows you to load/save gradients from/to the gradient resources to/from the editor.

  • Allows to overwrite an existing gradient resource.

  • A specific editor is shown automatically depending on the type of the gradient (stop gradient or segmented gradient).

  • Allows to convert between gradient types

Following is a breakdown of the interface of the editor:

../_images/generic_gradient_editor_breakdown.png
  1. Add gradient button - Pressing this button you can add the current gradient to the resources.

  2. Update gradient button - Pressing this button you can overwrite the gradient resource that is currently selected in the gradient chooser. Keep in mind that the type of the gradient resource and the type of the gradient that is currently being edited must match.

  3. Convert gradient button - Pressing this button you can convert the current gradient to a stop gradient if it is a segmented gradient or to a segmented gradient if it is a stop gradient.

  4. Convert gradient warning - This icon will appear when pressing the convert button means that some data or info will be lost in the conversion. This can happen when converting from a segmented gradient to a stop gradient.

  5. Gradient presets button - Pressing this button will pop-up a gradient preset chooser to let you choose a gradient and edit it. This button is only available if the “use a pop-up gradient preset chooser” is checked.

  6. Options button - Pressing this button will show an options menu.

  7. Specific editor area - Here the stop or segmented gradient editor will be shown when a gradient is selected. The specific gradient editors are documented in the previous sections.

  8. Gradient preset chooser - This widget shows a collection of gradient resources and allows you to load one of those gradients into the editor.

  9. Use a pop-up gradient preset chooser - If this option is checked, the gradient preset chooser will be accessed through a pop-up window that is shown by clicking the “choose gradient preset” button. If this option is not checked then the gradient preset chooser is shown inline above all the other widgets.

  10. Show compact gradient preset chooser - If this option is checked, then only the collection of gradient resources is shown, without any surrounding buttons or options. If it is not checked then the gradient preset chooser will also show some extra buttons, like tag filtering or viewing options.