diff --git a/2/input.png b/2/input.png new file mode 100644 index 0000000..bc45971 Binary files /dev/null and b/2/input.png differ diff --git a/gbf.js b/gbf.js index 8ad27f4..2ce72a3 100644 --- a/gbf.js +++ b/gbf.js @@ -8,10 +8,10 @@ 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 } + { id: 10, name: "10.png", x: 53, y: 441, input: false }, + { id: 20, name: "20.png", x: 153, y: 441, input: false }, + { id: 30, name: "30.png", x: 253, y: 441, input: false }, + { id: 100, name: "100.png", x: 353, y: 441, input: false } ], pos_data: [ { x: 63, y: 213 } @@ -32,11 +32,12 @@ var stampImgList = [ }, { 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 }, + { id: "10", name: "10.png", x: 53, y: 420, input: false }, + { id: "20", name: "20.png", x: 153, y: 420, input: false }, + { id: "30", name: "30.png", x: 253, y: 420, input: false }, + { id: "100", name: "100.png", x: 353, y: 420, input: false }, + { id: "atama", name: "atama.png", x: 453, y: 420, input: false }, + { id: "input", name: "input.png", x: 553, y: 420, input: true, text: "" }, ], pos_data: [ { x: 43, y: 219 } @@ -69,6 +70,7 @@ function init() { // 背景圖片 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; @@ -78,6 +80,8 @@ function init() { var stampData = new baseData(); stampData.Id = stamp.id; stampData.ImageName = curPath + stamp.name; + stampData.input = stamp.input; + stampData.text = stamp.text; stampData.ImageX = stamp.x; stampData.ImageY = stamp.y; stampData.setObj(); @@ -102,18 +106,27 @@ function init() { } stampData.ImageX = item.ImageX; stampData.ImageY = item.ImageY; + stampData.input = item.input; + stampData.text = item.text; stampData.IsRestore = true; stampData.setObj(); - stage.addChild(stampData.Obj); + if (stampData.input) { + var t = new createjs.Text(item.text, "18px sans-serif", "#000000"); + t.x = stampData.ImageX + 8; + t.y = stampData.ImageY + 8; + stampData.Obj.textObj = t; + stage.addChild(stampData.Obj); + stage.addChild(t); + }else{ + stage.addChild(stampData.Obj); + } } - // 測點用 function checkPoint(event) { console.info(stage.mouseX); console.info(stage.mouseY); } - stage.addEventListener("mousedown", checkPoint); - + // stage.addEventListener("mousedown", checkPoint); // tick イベントを監視します createjs.Ticker.setFPS(60); @@ -127,6 +140,8 @@ function baseData() { var _Func = this; _Func.Id = ""; _Func.IsRestore = false; + _Func.input = false; + _Func.text = ""; _Func.Obj = null; _Func.ImageName = ""; _Func.ImageX = 0; @@ -135,6 +150,8 @@ function baseData() { _Func.setObj = function () { _Func.Obj = new createjs.Bitmap(_Func.ImageName); _Func.Obj.customId = _Func.Id; + _Func.Obj.input = _Func.input; + _Func.Obj.text = _Func.text; _Func.Obj.x = _Func.ImageX; _Func.Obj.y = _Func.ImageY; @@ -143,6 +160,7 @@ function baseData() { _Func.Obj.addEventListener("pressmove", handleMove); _Func.Obj.addEventListener("pressup", handleUp); } else { + _Func.Obj.addEventListener("click", function () { console.info(_Func.Obj); }); _Func.Obj.addEventListener("dblclick", deleteSelf); } _Func.Obj.cursor = 'pointer'; @@ -167,14 +185,20 @@ function baseData() { 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); + var thisObj = Enumerable.from(stage.children).where(function (obj) { return obj.id === event.target.id }).firstOrDefault(); + + if (item.Id != thisObj.customId + || item.ImageX != event.target.x + || item.ImageY != event.target.y + ) { + curData.push(item); + } else { + console.info(thisObj); + } } tmpStampData.data = curData; localStorage.data = JSON.stringify(tmpData); - + if (event.target.input) stage.removeChild(event.target.textObj); stage.removeChild(event.target); } function handleDown(event) { @@ -208,9 +232,10 @@ function baseData() { && event.target.y <= (item.y + 30) ) { var cloneObj = event.target.clone(); + cloneObj.customId = event.target.customId; + cloneObj.input = event.target.input; // 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) { @@ -223,9 +248,22 @@ function baseData() { tmpBase.Id = event.target.customId; tmpBase.ImageX = event.target.x; tmpBase.ImageY = event.target.y; + tmpBase.input = event.target.input; + if (tmpBase.input) { + tmpBase.text = prompt("請輸入欲顯示之文字", ""); + var t = new createjs.Text(tmpBase.text, "18px sans-serif", "#000000"); + t.x = tmpBase.ImageX + 8; + t.y = tmpBase.ImageY + 8; + cloneObj.textObj = t; + stage.addChild(cloneObj); + stage.addChild(t); + }else{ + stage.addChild(cloneObj); + } tmpBase.IsRestore = true; cloneObj.addEventListener("dblclick", deleteSelf); + curStampData.push(tmpBase); localStorage.data = JSON.stringify(tmpData); }