blocklyでobjectを動かす。その7

2086 ワード

概要

blocklyでobjectを動かして見る。
sin波、やってみた。

写真

ステージを作る

<canvas id="canvas" width="400" height="300"></canvas>

ブロックを書く。

Blockly.Blocks.plot = {
    init: function() {
        this.jsonInit({
        message0: "plot %1",
        args0: [{
            type: "input_value",
            name: "TEXT"
        }],
        previousStatement: null,
        nextStatement: null,
        style: "text_blocks",
        tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
        helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
    })
}};

フローを書く。

objectを書く。

Blockly.JavaScript.plot = function(a) {
    return "plot(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "0") + ");\n"
};

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var dx = 0;
var pr = 0;
function plot(data) {
    var hc = 150;
    ctx.strokeStyle = "#f00";
    ctx.lineWidth = 1;
    ctx.moveTo(dx, hc - pr * 60);
    dx++;
    ctx.lineTo(dx, hc - data * 60);
    pr = data;
    ctx.stroke();
}

成果物

以上。

Author And Source

この問題について(blocklyでobjectを動かす。その7), 我々は、より多くの情報をここで見つけました https://qiita.com/ohisama@github/items/a3a2c03a41d9ccd002d1

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

blocklyでobjectを動かす。 その7

概要