{"id":28,"date":"2022-01-28T11:13:18","date_gmt":"2022-01-28T02:13:18","guid":{"rendered":"https:\/\/futurelab-test.kcg.edu\/?p=28"},"modified":"2022-02-18T11:18:56","modified_gmt":"2022-02-18T02:18:56","slug":"madoi%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%83%9a%e3%82%a4%e3%83%b3%e3%83%88","status":"publish","type":"post","link":"https:\/\/futurelab.kcg.edu\/?p=28","title":{"rendered":"madoi\u3092\u4f7f\u3063\u305f\u30da\u30a4\u30f3\u30c8"},"content":{"rendered":"\n<p>\u307f\u3093\u306a\u3067\u63cf\u3051\u308b\u30ad\u30e3\u30f3\u30d0\u30b9\u3067\u3059\u3002\u8ab0\u304b\u304c\u6700\u5f8c\u306b\u63cf\u3044\u3066\u304b\u308910\u5206\u307b\u3069\u7d4c\u3064\u3068\u5185\u5bb9\u306f\u6d88\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<div id=\"whiteboard\">\n    <div>\n        Color: <input name=\"foreground-color\" type=\"color\">\n        Size:  <input name=\"pen-size\" type=\"number\" value=\"2\" min=\"1\" max=\"10\" step=\"1\" required=\"\">\n    <\/div>\n    <canvas style=\"border: solid 1px\" width=\"380px\" height=\"360px\"><\/canvas>\n<\/div>\n<script src=\"https:\/\/fungo.kcg.edu\/madoi-20211003\/js\/madoi.js\"><\/script>\n<script>\nwindow.addEventListener(\"load\", ()=>{\n    const m = new madoi.Madoi(\"rooms\/whiteboard-olkksdfeg3\");\n    const wb = new WhiteBoard(\"#whiteboard\");\n    m.register(wb, [\n        {method: wb.draw, share: {maxLog: 100}},\n        {method: wb.getState, getState: {maxInterval: 1000, maxUpdates: 100}},\n        {method: wb.setState, setState: {}}\n    ]);\n});\n\nclass WhiteBoard {\n    constructor(boardId) {\n        this.boardElm = document.querySelector(boardId);\n        this.colorInput = this.boardElm.querySelector(\"input[name='foreground-color']\");\n        this.sizeInput = this.boardElm.querySelector(\"input[name='pen-size']\");\n        this.canvas = this.boardElm.querySelector(\"canvas\");\n        this.ctx = this.canvas.getContext(\"2d\");\n        this.drawing = false;\n        this.button = 0;\n        this.prevPos = { x: 0, y: 0 };\n        this.loading = false;\n        this.pendingDrawings = new Array();\n    \n        this.canvas.addEventListener(\"mousedown\", e => {\n            this.drawing = true;\n            this.button = e.button;\n            this.prevPos.x = e.offsetX;\n            this.prevPos.y = e.offsetY;\n            this.ctx.lineCap = 'round';\n            e.preventDefault();\n        });\n        this.canvas.addEventListener(\"mouseup\", () => {\n            this.drawing = false;\n        });\n        this.canvas.addEventListener(\"mousemove\", e => {\n            if (!this.drawing) return;\n            let c = \"#FFFFFF\";\n            let size = parseInt(this.sizeInput.value);\n            if (this.button === 0) {\n                c = this.colorInput.value;\n            } else{\n                size += 4;\n            }\n            this.draw(this.prevPos.x, this.prevPos.y, e.offsetX, e.offsetY, size, c);\n            this.prevPos = {x: e.offsetX, y: e.offsetY};\n        });\n        this.canvas.oncontextmenu = () => false;\n    }\n\n    draw(prevX, prevY, x, y, size, color) {\n        if(this.loading){\n            \/\/ \u753b\u50cf\u304c\u30ed\u30fc\u30c9\u4e2d\u306e\u5834\u5408\u306f\u63cf\u753b\u3092\u5f8c\u56de\u3057\u306b\u3059\u308b\n            this.pendingDrawings.push({\n                prevX: prevX, prevY: prevY,\n                x: x, y: y, size: size, color: color\n            });\n        } else{\n            this.ctx.beginPath();\n            this.ctx.strokeStyle = color;\n            this.ctx.lineWidth = size;\n            this.ctx.moveTo(prevX, prevY);\n            this.ctx.lineTo(x, y);\n            this.ctx.stroke();\n        }\n    }\n\n    getState() {\n        return this.canvas.toDataURL(\"image\/png\");\n    }\n\n    setState(state) {\n        this.loading = true;\n        const img = new Image();\n        img.onload = () => {\n            this.ctx.drawImage(img, 0, 0);\n            for(const p of this.pendingDrawings){\n                this.ctx.beginPath();\n                this.ctx.strokeStyle = p.color;\n                this.ctx.lineWidth = p.size;\n                this.ctx.moveTo(p.prevX, p.prevY);\n                this.ctx.lineTo(p.x, p.y);\n                this.ctx.stroke();\n            }\n            this.pendingDrawings = new Array();\n            this.loading = false;\n        };\n        img.src = state;\n    }\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u307f\u3093\u306a\u3067\u63cf\u3051\u308b\u30ad\u30e3\u30f3\u30d0\u30b9\u3067\u3059\u3002\u8ab0\u304b\u304c\u6700\u5f8c\u306b\u63cf\u3044\u3066\u304b\u308910\u5206\u307b\u3069\u7d4c\u3064\u3068\u5185\u5bb9\u306f\u6d88\u3048\u307e\u3059\u3002 Color: Size:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-28","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=\/wp\/v2\/posts\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":3,"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=\/wp\/v2\/posts\/28\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/futurelab.kcg.edu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}