加入輸入文字框

This commit is contained in:
2018-12-27 13:17:39 +09:00
parent b4f1c55f50
commit 8b6fe043b0
2 changed files with 57 additions and 19 deletions

BIN
2/input.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 551 B

76
gbf.js
View File

@@ -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);
}