269 lines
11 KiB
HTML
269 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="description" content="API docs for the paint method from the TouchPainter class, for the Dart programming language.">
|
||
|
|
<title>paint method - TouchPainter class - TouchPainter library - Dart API</title>
|
||
|
|
<!-- required because all the links are pseudo-absolute -->
|
||
|
|
<base href="../..">
|
||
|
|
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500,400i,400,300|Source+Sans+Pro:400,300,700" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="static-assets/github.css">
|
||
|
|
<link rel="stylesheet" href="static-assets/styles.css">
|
||
|
|
<link rel="icon" href="static-assets/favicon.png">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="overlay-under-drawer"></div>
|
||
|
|
|
||
|
|
<header id="title">
|
||
|
|
<button id="sidenav-left-toggle" type="button"> </button>
|
||
|
|
<ol class="breadcrumbs gt-separated dark hidden-xs">
|
||
|
|
<li><a href="index.html">touch_demonstrator</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/ui_home_TouchPainter-library.html">TouchPainter</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter-class.html">TouchPainter</a></li>
|
||
|
|
<li class="self-crumb">paint method</li>
|
||
|
|
</ol>
|
||
|
|
<div class="self-name">paint</div>
|
||
|
|
<form class="search navbar-right" role="search">
|
||
|
|
<input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
|
||
|
|
</form>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
|
||
|
|
<h5>TouchPainter class</h5>
|
||
|
|
<ol>
|
||
|
|
<li class="section-title"><a href="ui_home_TouchPainter/TouchPainter-class.html#constructors">Constructors</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/TouchPainter.html">TouchPainter</a></li>
|
||
|
|
|
||
|
|
<li class="section-title">
|
||
|
|
<a href="ui_home_TouchPainter/TouchPainter-class.html#instance-properties">Properties</a>
|
||
|
|
</li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/context.html">context</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/touchCollection.html">touchCollection</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/width.html">width</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/hashCode.html">hashCode</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/runtimeType.html">runtimeType</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/semanticsBuilder.html">semanticsBuilder</a></li>
|
||
|
|
|
||
|
|
<li class="section-title"><a href="ui_home_TouchPainter/TouchPainter-class.html#instance-methods">Methods</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/paint.html">paint</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/shouldRepaint.html">shouldRepaint</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/addListener.html">addListener</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/hitTest.html">hitTest</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/noSuchMethod.html">noSuchMethod</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/removeListener.html">removeListener</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/shouldRebuildSemantics.html">shouldRebuildSemantics</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/toString.html">toString</a></li>
|
||
|
|
|
||
|
|
<li class="section-title inherited"><a href="ui_home_TouchPainter/TouchPainter-class.html#operators">Operators</a></li>
|
||
|
|
<li class="inherited"><a href="ui_home_TouchPainter/TouchPainter/operator_equals.html">operator ==</a></li>
|
||
|
|
|
||
|
|
<li class="section-title"><a href="ui_home_TouchPainter/TouchPainter-class.html#static-properties">Static properties</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/buttonPressed.html">buttonPressed</a></li>
|
||
|
|
<li><a href="ui_home_TouchPainter/TouchPainter/buttonReleased.html">buttonReleased</a></li>
|
||
|
|
|
||
|
|
|
||
|
|
</ol>
|
||
|
|
</div><!--/.sidebar-offcanvas-->
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
|
||
|
|
<h1>paint method</h1>
|
||
|
|
|
||
|
|
<section class="multi-line-signature">
|
||
|
|
<div>
|
||
|
|
<ol class="annotation-list">
|
||
|
|
<li>@override</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<span class="returntype">void</span>
|
||
|
|
<span class="name ">paint</span>
|
||
|
|
(<wbr><span class="parameter" id="paint-param-canvas"><span class="type-annotation">Canvas</span> <span class="parameter-name">canvas</span>, </span> <span class="parameter" id="paint-param-size"><span class="type-annotation">Size</span> <span class="parameter-name">size</span></span>)
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<section class="desc markdown">
|
||
|
|
<p>Called whenever the object needs to paint. The given <code>Canvas</code> has its
|
||
|
|
coordinate space configured such that the origin is at the top left of the
|
||
|
|
box. The area of the box is the size of the <code>size</code> argument.</p>
|
||
|
|
<p>Paint operations should remain inside the given area. Graphical operations
|
||
|
|
outside the bounds may be silently ignored, clipped, or not clipped.</p>
|
||
|
|
<p>Implementations should be wary of correctly pairing any calls to
|
||
|
|
<code>Canvas.save</code>/<code>Canvas.saveLayer</code> and <code>Canvas.restore</code>, otherwise all
|
||
|
|
subsequent painting on this canvas may be affected, with potentially
|
||
|
|
hilarious but confusing results.</p>
|
||
|
|
<p>To paint text on a <code>Canvas</code>, use a <code>TextPainter</code>.</p>
|
||
|
|
<p>To paint an image on a <code>Canvas</code>:</p><ol><li>
|
||
|
|
<p>Obtain an <code>ImageStream</code>, for example by calling <code>ImageProvider.resolve</code>
|
||
|
|
on an <code>AssetImage</code> or <code>NetworkImage</code> object.</p></li><li>
|
||
|
|
<p>Whenever the <code>ImageStream</code>'s underlying <code>ImageInfo</code> object changes
|
||
|
|
(see <code>ImageStream.addListener</code>), create a new instance of your custom
|
||
|
|
paint delegate, giving it the new <code>ImageInfo</code> object.</p></li><li>
|
||
|
|
<p>In your delegate's <a href="ui_home_TouchPainter/TouchPainter/paint.html">paint</a> method, call the <code>Canvas.drawImage</code>,
|
||
|
|
<code>Canvas.drawImageRect</code>, or <code>Canvas.drawImageNine</code> methods to paint the
|
||
|
|
<code>ImageInfo.image</code> object, applying the <code>ImageInfo.scale</code> value to
|
||
|
|
obtain the correct rendering size.</p></li></ol>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="summary source-code" id="source">
|
||
|
|
<h2><span>Implementation</span> </h2>
|
||
|
|
<pre class="language-dart"><code class="language-dart">@override
|
||
|
|
void paint(Canvas canvas, Size size) {
|
||
|
|
int maxSize = 1100;
|
||
|
|
int leftLine = 100;
|
||
|
|
int rightLine = 950;
|
||
|
|
|
||
|
|
void _drawCircle(int x, int y, Color v) {
|
||
|
|
double xCircle;
|
||
|
|
double yCircle;
|
||
|
|
xCircle = x.toDouble() / maxSize * size.width;
|
||
|
|
yCircle = y.toDouble() / maxSize * size.height;
|
||
|
|
|
||
|
|
Paint line = Paint()
|
||
|
|
..color = v
|
||
|
|
..strokeCap = StrokeCap.round
|
||
|
|
..style = PaintingStyle.stroke
|
||
|
|
..strokeWidth = 4.0;
|
||
|
|
// print("C: $xCircle / ${size.width}");
|
||
|
|
canvas.drawCircle(Offset(xCircle, yCircle), 8.0, line);
|
||
|
|
}
|
||
|
|
|
||
|
|
void _drawSlider(int x, int y, Color v) {
|
||
|
|
double topSlider = 65.0;
|
||
|
|
double bottomSlider = 940.0;
|
||
|
|
int sliderPercent;
|
||
|
|
double range = bottomSlider - topSlider;
|
||
|
|
double sliderPosition;
|
||
|
|
double sliderValue;
|
||
|
|
|
||
|
|
if (y > topSlider) {
|
||
|
|
sliderPosition = y - topSlider;
|
||
|
|
} else {
|
||
|
|
sliderPosition = 0;
|
||
|
|
}
|
||
|
|
sliderValue = sliderPosition / range; // 0...1
|
||
|
|
|
||
|
|
sliderPercent = (sliderValue * 100).round(); // %
|
||
|
|
if (sliderPercent > 100) sliderPercent = 100;
|
||
|
|
if (sliderPercent < 0) sliderPercent = 0;
|
||
|
|
|
||
|
|
/* print("range: $range");
|
||
|
|
print("sliderPosition = $sliderPosition");
|
||
|
|
print("%: $sliderValue");
|
||
|
|
print("%R: $sliderPercent");*/
|
||
|
|
|
||
|
|
Paint line = Paint()
|
||
|
|
..color = v
|
||
|
|
..strokeCap = StrokeCap.round
|
||
|
|
..style = PaintingStyle.stroke
|
||
|
|
..strokeWidth = 5.0;
|
||
|
|
var xLine = rightLine;
|
||
|
|
var yLine = size.height * (y / maxSize);
|
||
|
|
// print("$yLine / ${size.height}");
|
||
|
|
canvas.drawLine(
|
||
|
|
|
||
|
|
///Slider line
|
||
|
|
Offset(xLine / maxSize * size.width, yLine),
|
||
|
|
Offset(
|
||
|
|
(xLine + (maxSize - xLine) / 1.2) / maxSize * size.width, yLine),
|
||
|
|
line);
|
||
|
|
TextSpan percentage =
|
||
|
|
new TextSpan(style: new TextStyle(color: v), text: "$sliderPercent");
|
||
|
|
TextPainter tp = new TextPainter(
|
||
|
|
text: percentage,
|
||
|
|
textAlign: TextAlign.left,
|
||
|
|
textDirection: TextDirection.rtl);
|
||
|
|
tp.layout();
|
||
|
|
tp.paint(canvas,
|
||
|
|
new Offset(rightLine / maxSize * size.width - 50.0, yLine - 15.0));
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
touchCollection.forEach((k, v) {
|
||
|
|
// print("${k.f} ${k.e} ${k.x} ${k.y}");
|
||
|
|
if (k.x <= 1023 && k.y < maxSize) {
|
||
|
|
switch (k.e) {
|
||
|
|
case 5:
|
||
|
|
{
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case 4:
|
||
|
|
{
|
||
|
|
continue move;
|
||
|
|
}
|
||
|
|
move:
|
||
|
|
case 1:
|
||
|
|
{
|
||
|
|
|
||
|
|
|
||
|
|
/* _drawCircle(0, maxSize, v); //L U
|
||
|
|
_drawCircle(0, 550, v); // L M
|
||
|
|
_drawCircle(0, 0, v); // L O
|
||
|
|
|
||
|
|
_drawCircle(550, 0, v); // M O
|
||
|
|
_drawCircle(550, 550, v); // MITTE
|
||
|
|
_drawCircle(550, maxSize, v); // M U
|
||
|
|
|
||
|
|
_drawCircle(maxSize, 0, v); // R O
|
||
|
|
_drawCircle(maxSize, 550, v); // R M
|
||
|
|
_drawCircle(maxSize, maxSize, v); //R U*/
|
||
|
|
|
||
|
|
// _drawCircle(175, 511, v); // L M
|
||
|
|
// _drawCircle(850, 511, v); // L M
|
||
|
|
// _drawCircle(180, 550, v); // L M
|
||
|
|
|
||
|
|
/// middle touch pad
|
||
|
|
if (k.x > leftLine && k.x < rightLine) {
|
||
|
|
_drawCircle(k.x, k.y, v);
|
||
|
|
}
|
||
|
|
|
||
|
|
/// right slider
|
||
|
|
else if (k.x >= rightLine) {
|
||
|
|
_drawSlider(k.x, k.y, v);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
default:
|
||
|
|
{
|
||
|
|
print(" W.T.F");
|
||
|
|
print("tE: $k.e");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}</code></pre>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div> <!-- /.main-content -->
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
|
||
|
|
</div><!--/.sidebar-offcanvas-->
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<span class="no-break">
|
||
|
|
touch_demonstrator 1.0.0+1
|
||
|
|
</span>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||
|
|
<script src="static-assets/typeahead.bundle.min.js"></script>
|
||
|
|
<script src="static-assets/highlight.pack.js"></script>
|
||
|
|
<script src="static-assets/URI.js"></script>
|
||
|
|
<script src="static-assets/script.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|