キャンバスがカッコいい!

Nikolai Semko 2020.10.26 12:36 #631

Vladimir Pastushak:

皆さんこんにちは、Canvasの知識を深めたいのですが

どこから手をつけていいのかわからないくらいです。今、Canvasは複雑な対数式とか想像しているんです。

キャンバス上に以下のようなボタンを作る例を教えてください。それを理解するためのコードが必要です。

トレーディング、自動売買システム、ストラテジーテストに関するフォーラム

Canvasでクラウドソーシングのプロジェクトを作る

ニコライ・セムコさん 2017.05.24 02:20

出てきたのはこんな感じです。

ボタンは背景の後ろと前景に表示でき、クリックロックするかしないかを設定できます。

サンプルファイルCanvasButton.mq5では、マウスでボタンをドラッグすることが可能です。Ctrlキーで青いボタン、Shiftキーで赤いボタンを移動させるだけです。

GButton クラスは CCanvas クラスの子孫なので、CircleWu のサンプルで CCanvas クラスの関数を使用する機能をデモしています（OnInit で実装されています）。そこで、CCanvas クラスの関数を使って、ボタンにテキストを書き込むことが可能です。

もちろん、このクラスはクリーンさを装っているわけではありません。グラフィックの完成度は高くなく、3Dもありきたりで、シャドウも実装されておらず、実行速度も最適化されていない。そして、ほとんどの場合、粗が多く、様々なチェックが不足しています。だから、厳しく判断してはいけない。

もう少し時間をかければ、もちろん可能です。

私はただ...方向性を決めるということですね。

Canvas.mqhは、m_pixels配列がpublicに定義されている点のみオリジナルと異なります。

Codexample 2021.01.27 09:24 #632

ニコライはもちろん、Canvasの実験にかける鋭敏な熱意へのリスペクトです。そして、コード例も少なくない喜びを持って勉強しています。

もちろん、現在のCanvasの実装は、ビットマップ配列にグラフィカルプリミティブを充填するための、純粋にCPUに依存したアルゴリズムです。I.e. 配列要素の列挙を伴うループ経由といったところでしょうか...。一方、21年前のこと...。

実験は確かに良いのですが、実用のための実装は、美しいだけでなく、効果的であるべきです。8コアの最高級PCならともかく、一般的なユーザーはミドルクラスのPCを使用していますからね。また、市場データを可視化するフルスクリーンGUIは、たとえ非常に便利で美しくても、CPUに75％もの負荷をかけるようでは人気が出ないでしょう。これは事実です。そのため、主要なブラウザのCanvas実装では、ハードウェアアクセラレーションが導入されています（他にやることがなかったからではありません）。

MQL5では、Direct2D（とDirectWrite）のラッパーがあるはずです。これは、GUIやデータビジュアライゼーションの分野における多くの実用的なタスクを、効率的にハードウェアで加速して実装する道を開く、真の爆弾となるでしょう。もちろん、すでにDirectXがあるとも言えます。しかし、そのDirect3Dの部分しか表現されておらず、それは3Dの投影やシェーダーなどの属性であり、実用としてはまだむしろ狭いニッチな領域です。もちろん、投影やその他の操作、テッセレーションを調整することで、Direct3Dによる2Dグラフィックスのレンダリングを実現することは可能です。Direct2Dが実装されたのはかなり前なので、これでは意味がないでしょう。

そこで考えたのが...。

Renat Fatkhullin 2021.01.27 14:35 #633

とはいえ、CPUでもすべてが素早く描画できる。

上記の例がそれを証明しています。しかも、最終的な映像の美しさや洗練さには厳しい条件がないアプリケーション領域です。

Nikolai Semko 2021.01.27 21:31 #634

Codexample:

ニコライはもちろん、Canvasの実験にかける鋭敏な熱意へのリスペクトです。そして、コード例も少なくない喜びを持って勉強しています。

残念ながら、現在のCanvasの実装は、ビットマップ配列にグラフィカルプリミティブを充填するためのCPUバウンドアルゴリズムに過ぎません。配列要素検索によるループ経由などといったところでしょうか...。一方、21年前のこと...。

実験は確かに良いのですが、実用のための実装は、美しいだけでなく、効果的であるべきです。8コアの最高級PCならともかく、一般的なユーザーはミドルクラスのPCを使用していますからね。また、市場データを可視化するフルスクリーンGUIは、たとえ非常に便利で美しくても、CPUに75％もの負荷をかけるようでは人気が出ないでしょう。これは事実です。そのため、主要なブラウザのCanvas実装には、ハードウェアアクセラレーションが導入されています（他にやることがなかったというわけではありません）。

実際、MQL5はDirect2D（とDirectWrite）のラッパーになるわけですが、GUIやデータビジュアライゼーションの分野で多くの実用的なタスクを効率的にハードウェアで加速して実装する道を開く、本当の爆弾になるでしょうね。もちろん、すでにDirectXがあるとも言えます。しかし、そのDirect3Dの部分しか表現されておらず、それは3Dの投影やシェーダーなどの属性であり、実用としてはまだむしろ狭いニッチな領域です。もちろん、投影やその他の操作、テッセレーションを調整することで、Direct3Dによる2Dグラフィックスのレンダリングを実現することは可能です。Direct2Dが実装されたのはかなり前なので、これでは意味がないでしょう。

ここで一考...。

嬉しいお言葉をありがとうございます。
実はMQはこの点が優れていて、CPUだけでなくGPUを使ったグラフィックスやコンピュートツールにも気を配っているのです。
OpenCLとDirectXのことです。
ここでは、同じグラフィックタスク（8つの重心）の実装を、CPU、OpenCL（GPU）、DirectX（GPU）の3種類で比較した例を示します。

1.CPU -14 fps.(スクリプト Swirl2.mq5)

2.OpenCL - 162フレーム/秒（OpenCLドライバのインストールが必要です）（Swirl2_OCL.mq5スクリプト）

3.DirectX - 37フレーム/秒(スクリプト Swirl2_GPU.mq5)

最大限のパフォーマンスが必要な場合は、グラフィックカードも使用することができます。

グラフィックカードのパワーを使うことで非常にまともなパフォーマンスアップが得られる一方で、グラフィック出力にCPUを使うことでも、MQL5のタスクエリアにおけるすべてのグラフィックタスクの99％以上をカバーできるというRenatの意見に同意します。
フレームが10ミリ秒以内に生成される限り、GPUについて特にジタバタすることはありません（誘惑は時々ありますが、操縦の余地があるのは良いことです）。そして、例えばシャドウ、アンチエイリアス、透明度をつけたようなものを10ミリ秒で出力することができるのです。