HTML5 Canvasをベースに地下鉄駅監視を実現-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 Canvasをベースに地下鉄駅監視を実現

小云云

Dec 06, 2017 pm 04:23 PM

canvas html5

この例の動的効果は次のとおりです:
HTML5 Canvasをベースに地下鉄駅監視を実現

まず基本的なシーンを構築しましょう。HT では、外部シーンを内部にインポートする非常に一般的な方法は、JSON ファイルを解析し、JSON ファイルを使用して構築します。シーンの利点の 1 つは、リサイクルできることです。今日のシーンは JSON を使用して描画されました。次に、HT は ht.Default.xhrLoad 関数を使用して JSON シーンをロードし、HT でカプセル化された DataModel.deserialize(json) を使用してそれを逆シリアル化し、逆シリアル化されたオブジェクトを DataModel に追加します。 type オブジェクトが構築されると、内部で id 属性が自動的に割り当てられます。この属性は、Data オブジェクトが DataModel に追加された後、data.getId() および data.setId(id) を通じて取得および設定できます。変更は許可されていません。dataModel.getDataById(id) を通じて取得できます。 Data オブジェクトをすばやく検索します。通常、ID 属性は HT によって自動的に割り当てられることが推奨されます。Data#setTag(tag) 関数を使用すると、対応するデータを動的に変更できます。オブジェクトは DataModel#getDataByTag(tag) を通じて見つけることができ、 DataModel#removeDataByTag(tag) を通じてデータオブジェクトの削除をサポートします。ここでは、JSON で Data オブジェクトのタグ属性を設定し、コード内の dataModel.getDataByTag(tag) 関数を通じて Data オブジェクトを取得します。

ht.Default.xhrLoad('demo2.json', function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

ログイン後にコピー

以下の図の各タグに対応する要素を作成しました。

HTML5 Canvasをベースに地下鉄駅監視を実現次に、回転してフラッシュする必要があるオブジェクトを設定します。HT は setRotation(rotation) 関数を使用して「回転」をカプセル化し、オブジェクトの現在の回転角度を取得し、この角度に基づいて特定のラジアンを追加します。 setInterval 一定の時間間隔内で同じ円弧を回転できるように定期的に呼び出されます。

var fan1 = dataModel.getDataByTag('fan1');
var fan2 = dataModel.getDataByTag('fan2');
var camera1 = dataModel.getDataByTag('camera1');
var camera2 = dataModel.getDataByTag('camera2');
var camera3 = dataModel.getDataByTag('camera3');
var redAlarm = dataModel.getDataByTag('redAlarm');
var yellowAlarm = dataModel.getDataByTag('yellowAlarm');

ログイン後にコピー

HT は、スタイルを設定するための setStyle 関数もカプセル化します。これは s と省略できます。特定のスタイルについては、Web 用の HT を参照してください。スタイルマニュアル:

setInterval(function(){
    var time = new Date().getTime();
    var deltaTime = time - lastTime;
    var deltaRotation = deltaTime * Math.PI / 180 * 0.1;
    lastTime = time;

    fan1.setRotation(fan1.getRotation() + deltaRotation*3);
    fan2.setRotation(fan2.getRotation() + deltaRotation*3);
    camera1.setRotation(camera1.getRotation() + deltaRotation/3);
    camera2.setRotation(camera2.getRotation() + deltaRotation/3);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
        var color = stairIndex === i ? &#39;#F6A623&#39; : &#39;#CFCFCF&#39;;
        dataModel.getDataByTag(&#39;stair_1_&#39; + i).s(&#39;shape.border.color&#39;, color);
        dataModel.getDataByTag(&#39;stair_2_&#39; + i).s(&#39;shape.border.color&#39;, color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s(&#39;shape.background&#39;, null);
        redAlarm.s(&#39;shape.background&#39;, null);
    }
    else {
        yellowAlarm.s(&#39;shape.background&#39;, &#39;yellow&#39;);
        redAlarm.s(&#39;shape.background&#39;, &#39;red&#39;);
    }
}, 5);

ログイン後にコピー

us 「警告灯」の点滅も、偶数秒の場合は、ライトの背景色が「無色」に設定されます。それ以外の場合は、黄色アラームになります。 redAlarm の場合は、「黄色」に設定されます。「赤」の場合:

for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
    var color = stairIndex === i ? &#39;#F6A623&#39; : &#39;#CFCFCF&#39;;
    dataModel.getDataByTag(&#39;stair_1_&#39; + i).s(&#39;shape.border.color&#39;, color);
    dataModel.getDataByTag(&#39;stair_2_&#39; + i).s(&#39;shape.border.color&#39;, color);
}

ログイン後にコピー

例全体は非常に簡単に解決されました。。。

さらに詳しく知りたい人は、HT for Web の公式 Web サイトにアクセスして、さまざまなマニュアルを参照して学ぶことができます。

国内経済の急速な発展に伴い、人々の安全に対する要求はますます高まっています。次のような事態が起こらないようにするために、セキュリティシステムの導入を検討する必要があります。証拠と手がかりの提供: 多くの工場、銀行、盗難、事故では、関係機関がビデオ情報に基づいて事件を検出できます。これは非常に重要です。手がかり。紛争や事故も発生しており、ビデオ録画により関係者の責任が容易に判明します。民間防空のコストが高い：現在、多くの場所で安全を考えるとき、警備員1人あたり月800ドルの費用がかかり、1日3交代の人員は年間4万元近くかかります。電子セキュリティ機器のコストは決して安くはなく、数年以内に電子セキュリティ機器を交換する必要性は低くなります。したがって、民間防空のコストは比較的高くなります。民間防空支援: 多くの場合、安全を確保するために人だけに頼ることは非常に困難であり、より完璧にするためには電子セキュリティ機器 (モニターや警報器など) の支援が必要です。特別な場合に使用する必要があります。過酷な条件下（高温、低温、密閉など）、肉眼ではっきりと観察することが難しい、または単に人が滞在するのに適さない環境であるため、電子セキュリティ装置を使用する必要があります。隠蔽：電子セキュリティ機器を使用すると、一般の人は自分たちが常に監視されているとは感じなくなり、隠蔽されます。 24 時間のセキュリティ保証: 24 時間中断のないセキュリティのニーズを実現するには、電子機器を考慮する必要があります。遠隔監視：コンピュータ技術とネットワーク技術の発展により、多くの企業のリーダーがインターネットを介して、世界中の支店の状況を遠隔から監視したり、映像を視聴したりできるようになりました。タイムリーな状況把握に役立ちます。画像の保存: デジタルビデオ技術の発展により、画像をコンピュータのデジタルストレージデバイスに保存できるようになり、より鮮明な画像で長期間保存できるようになります。生産管理：管理者は生産現場の状況をタイムリーかつ直感的に把握でき、指揮・管理が容易になります。

中国では監視システムの需要が大きいため、地下鉄の駅などの大規模な監視では、事故を防ぐための監視システムが必要です。今日は地下鉄のフロントエンド部分の作成方法を紹介します。駅監視システム。

http://www.hightopo.com/demo/... ページを右クリックし、[要素の検査] をクリックしてサンプルソースコードを表示します。

この例の動的効果は次のとおりです:
HTML5 Canvasをベースに地下鉄駅監視を実現

ht.Default.xhrLoad(&#39;demo2.json&#39;, function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

ログイン後にコピー

以下の図の各タグに対応する要素を作成しました。

var fan1 = dataModel.getDataByTag(&#39;fan1&#39;);
var fan2 = dataModel.getDataByTag(&#39;fan2&#39;);
var camera1 = dataModel.getDataByTag(&#39;camera1&#39;);
var camera2 = dataModel.getDataByTag(&#39;camera2&#39;);
var camera3 = dataModel.getDataByTag(&#39;camera3&#39;);
var redAlarm = dataModel.getDataByTag(&#39;redAlarm&#39;);
var yellowAlarm = dataModel.getDataByTag(&#39;yellowAlarm&#39;);

ログイン後にコピー

setInterval(function(){
    var time = new Date().getTime();
    var deltaTime = time - lastTime;
    var deltaRotation = deltaTime * Math.PI / 180 * 0.1;
    lastTime = time;

    fan1.setRotation(fan1.getRotation() + deltaRotation*3);
    fan2.setRotation(fan2.getRotation() + deltaRotation*3);
    camera1.setRotation(camera1.getRotation() + deltaRotation/3);
    camera2.setRotation(camera2.getRotation() + deltaRotation/3);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
        var color = stairIndex === i ? '#F6A623' : '#CFCFCF';
        dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
        dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s('shape.background', null);
        redAlarm.s('shape.background', null);
    }
    else {
        yellowAlarm.s('shape.background', 'yellow');
        redAlarm.s('shape.background', 'red');
    }
}, 5);

ログイン後にコピー

us 「警告灯」の点滅も、偶数秒の場合は、ライトの背景色が「無色」に設定されます。それ以外の場合は、黄色アラームになります。 redAlarm の場合は "red" に設定されます。

for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
    var color = stairIndex === i ? '#F6A623' : '#CFCFCF';
    dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
    dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
}

ログイン後にコピー

以上の内容は、HTML5 Canvas をベースに地下鉄の駅監視を実装する方法です。