初始

.htaccess

@@ -0,0 +1,5 @@
+Header set Access-Control-Allow-Origin "*"
+
+<IfModule mod_headers.c>
+    Header set Access-Control-Allow-Origin "*"
+</IfModule>

gbf.js

@@ -0,0 +1,260 @@
+var stage = null;
+var canvas = null;
+var stampList = [];
+if (typeof (localStorage.data) == "undefined") localStorage.data = "[]";
+
+
+// 定義基本資料
+var stampImgList = [
+    {
+        id: 1, name: "GBF 2018四周年", image_data: [
+            { id: 10, name: "10.png", x: 53, y: 441 },
+            { id: 20, name: "20.png", x: 153, y: 441 },
+            { id: 30, name: "30.png", x: 253, y: 441 },
+            { id: 100, name: "100.png", x: 353, y: 441 }
+        ],
+        pos_data: [
+            { x: 63, y: 213 }
+            , { x: 153, y: 213 }
+            , { x: 243, y: 213 }
+            , { x: 333, y: 213 }
+            , { x: 423, y: 213 }
+            , { x: 513, y: 213 }
+            , { x: 603, y: 213 }
+            , { x: 63, y: 303 }
+            , { x: 153, y: 303 }
+            , { x: 243, y: 303 }
+            , { x: 333, y: 303 }
+            , { x: 423, y: 303 }
+            , { x: 513, y: 303 }
+            , { x: 603, y: 303 }
+        ]
+    },
+    {
+        id: 2, name: "GBF 2018聖誕節", image_data: [
+            { id: "10", name: "10.png", x: 53, y: 420 },
+            { id: "20", name: "20.png", x: 153, y: 420 },
+            { id: "30", name: "30.png", x: 253, y: 420 },
+            { id: "100", name: "100.png", x: 353, y: 420 },
+            { id: "atama", name: "atama.png", x: 453, y: 420 },
+        ],
+        pos_data: [
+            { x: 43, y: 219 }
+            , { x: 133, y: 219 }
+            , { x: 223, y: 219 }
+            , { x: 313, y: 219 }
+            , { x: 403, y: 219 }
+            , { x: 493, y: 219 }
+            , { x: 583, y: 219 }
+            , { x: 43, y: 311 }
+            , { x: 133, y: 311 }
+            , { x: 223, y: 311 }
+            , { x: 313, y: 311 }
+            , { x: 403, y: 311 }
+            , { x: 493, y: 311 }
+            , { x: 583, y: 311 }
+        ]
+    }
+];
+
+
+function init() {
+    var curEventId = $("select[name=EventList]").val();
+    var curPath = "./" + curEventId + "/"
+
+    canvas = document.querySelector('#gbfCanvas');
+    stage = new createjs.Stage("gbfCanvas");
+    stage.enableMouseOver();
+
+    // 背景圖片
+    var stampCard = new createjs.Bitmap(curPath + "main.png");
+    stage.addChild(stampCard);
+    // point
+    stampList = [];
+    var curStampImgList = Enumerable.from(stampImgList).where(function (obj) { return obj.id == curEventId; }).firstOrDefault().image_data;
+    for (var i in curStampImgList) {
+        var stamp = curStampImgList[i];
+
+        var stampData = new baseData();
+        stampData.Id = stamp.id;
+        stampData.ImageName = curPath + stamp.name;
+        stampData.ImageX = stamp.x;
+        stampData.ImageY = stamp.y;
+        stampData.setObj();
+        stage.addChild(stampData.Obj);
+        stampList.push(stampData);
+    }
+    // space
+    curPos = Enumerable.from(stampImgList).where(function (obj) { return obj.id == curEventId; }).firstOrDefault().pos_data;
+
+    // 代入上次存檔值
+    var tmpData = JSON.parse(localStorage.data);
+    var tmpStampData = Enumerable.from(tmpData).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
+    if (tmpStampData == null) tmpStampData = { id: curEventId, data: [] };
+    var curStampData = tmpStampData.data;
+    for (var index in curStampData) {
+        var item = curStampData[index];
+        stampData = new baseData();
+        stampData.Id = item.Id;
+        for (var i in stampList) {
+            var tmpStamp = stampList[i];
+            if (tmpStamp.Id == item.Id) stampData.ImageName = tmpStamp.ImageName;
+        }
+        stampData.ImageX = item.ImageX;
+        stampData.ImageY = item.ImageY;
+        stampData.IsRestore = true;
+        stampData.setObj();
+        stage.addChild(stampData.Obj);
+    }
+
+    // 測點用
+    function checkPoint(event) {
+        console.info(stage.mouseX);
+        console.info(stage.mouseY);
+    }
+    stage.addEventListener("mousedown", checkPoint);
+
+
+    // tick イベントを監視します
+    createjs.Ticker.setFPS(60);
+    createjs.Ticker.on("tick", function () {
+        // Stageの描画を更新します
+        stage.update();
+    });
+}
+
+function baseData() {
+    var _Func = this;
+    _Func.Id = "";
+    _Func.IsRestore = false;
+    _Func.Obj = null;
+    _Func.ImageName = "";
+    _Func.ImageX = 0;
+    _Func.ImageY = 0;
+
+    _Func.setObj = function () {
+        _Func.Obj = new createjs.Bitmap(_Func.ImageName);
+        _Func.Obj.customId = _Func.Id;
+        _Func.Obj.x = _Func.ImageX;
+        _Func.Obj.y = _Func.ImageY;
+
+        if (!_Func.IsRestore) {
+            _Func.Obj.addEventListener("mousedown", handleDown);
+            _Func.Obj.addEventListener("pressmove", handleMove);
+            _Func.Obj.addEventListener("pressup", handleUp);
+        } else {
+            _Func.Obj.addEventListener("dblclick", deleteSelf);
+        }
+        _Func.Obj.cursor = 'pointer';
+
+        _Func.Obj.addEventListener('mouseover', function (e) {
+            canvas.className = 'mouseon';
+        });
+
+
+    }
+    function deleteSelf(event) {
+        var curEventId = $("select[name=EventList]").val();
+
+        var tmpData = JSON.parse(localStorage.data);
+        var tmpStampData = Enumerable.from(tmpData).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
+        if (tmpStampData == null) {
+            tmpData.push({ id: curEventId, data: [] });
+            tmpStampData = Enumerable.from(tmpData).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
+        }
+        var curStampData = tmpStampData.data;
+
+        var curData = [];
+        for (var index in curStampData) {
+            var item = curStampData[index];
+            if (item.Id != event.target.customId
+                & item.ImageX != event.target.x
+                & item.ImageY != event.target.y
+            ) curData.push(item);
+        }
+        tmpStampData.data = curData;
+        localStorage.data = JSON.stringify(tmpData);
+
+        stage.removeChild(event.target);
+    }
+    function handleDown(event) {
+        // ドラッグを開始した座標を覚えておく
+        dragPointX = stage.mouseX - event.target.x;
+        dragPointY = stage.mouseY - event.target.y;
+        // ボールを半透明にする
+        event.target.alpha = 0.5;
+    }
+    // ボールを押した状態で動かしたときの処理です
+
+    function handleMove(event) {
+        // ボールはマウス座標に追随する
+        // ただしドラッグ開始地点との補正をいれておく
+        event.target.x = stage.mouseX - dragPointX;
+        event.target.y = stage.mouseY - dragPointY;
+    }
+    // ボールからマウスを離したときの処理です
+
+    function handleUp(event) {
+        var curEventId = $("select[name=EventList]").val();
+
+        // ボールを元の透明度に戻す
+        event.target.alpha = 1.0;
+
+        for (var index in curPos) {
+            var item = curPos[index];
+            if (event.target.x >= (item.x - 30)
+                && event.target.x <= (item.x + 30)
+                && event.target.y >= (item.y - 30)
+                && event.target.y <= (item.y + 30)
+            ) {
+                var cloneObj = event.target.clone();
+                // cloneObj.x = item.x + 8;
+                // cloneObj.y = item.y + 8;
+                stage.addChild(cloneObj);
+                var tmpData = JSON.parse(localStorage.data);
+                var tmpStampData = Enumerable.from(tmpData).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
+                if (tmpStampData == null) {
+                    tmpData.push({ id: curEventId, data: [] });
+                    tmpStampData = Enumerable.from(tmpData).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
+                }
+                var curStampData = tmpStampData.data;
+
+                var tmpBase = new baseData();
+                tmpBase.Id = event.target.customId;
+                tmpBase.ImageX = event.target.x;
+                tmpBase.ImageY = event.target.y;
+                tmpBase.IsRestore = true;
+                cloneObj.addEventListener("dblclick", deleteSelf);
+
+                curStampData.push(tmpBase);
+                localStorage.data = JSON.stringify(tmpData);
+            }
+        }
+
+        for (var index in stampList) {
+            var item = stampList[index];
+            if (item.Id == event.target.customId) {
+                event.target.x = item.ImageX;
+                event.target.y = item.ImageY;
+            }
+        }
+    }
+}
+
+function stampChecker() {
+    var _Func = this;
+    _Func.x = 0;
+    _Func.y = 0;
+}
+
+$(function () {
+    window.addEventListener("load", init);
+
+    $("select[name=EventList]").on("change", function () {
+        stage.removeAllChildren();
+        stage.update();
+        init();
+    });
+});
+
+

index.php

@@ -0,0 +1,30 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <script src="https://www.solamimi.org/js/jquery.js"></script>
+    <script src="https://www.solamimi.org/js/linq.min.js"></script>
+    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
+    <script src="gbf.js"></script>
+
+    <style>
+    #myCanvas.mouseon{
+      cursor: pointer;
+    }
+    </style>
+</head>
+
+<body>
+    活動選擇：
+    <select name="EventList">
+        <option value="2">GBF 2018聖誕節</option>
+        <option value="1">GBF 2018四周年</option>
+    </select>
+    <br />
+    格子內的點二下刪除，資料存在使用者端，換電腦資料會消失
+    <br />
+    <canvas id="gbfCanvas" width="960" height="540"></canvas>
+</body>
+
+
+</html>