加入輸入文字框
This commit is contained in:
BIN
2/input.png
Normal file
BIN
2/input.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
74
gbf.js
74
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();
|
||||
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user