加入輸入文字框
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 = [
|
var stampImgList = [
|
||||||
{
|
{
|
||||||
id: 1, name: "GBF 2018四周年", image_data: [
|
id: 1, name: "GBF 2018四周年", image_data: [
|
||||||
{ id: 10, name: "10.png", x: 53, y: 441 },
|
{ id: 10, name: "10.png", x: 53, y: 441, input: false },
|
||||||
{ id: 20, name: "20.png", x: 153, y: 441 },
|
{ id: 20, name: "20.png", x: 153, y: 441, input: false },
|
||||||
{ id: 30, name: "30.png", x: 253, y: 441 },
|
{ id: 30, name: "30.png", x: 253, y: 441, input: false },
|
||||||
{ id: 100, name: "100.png", x: 353, y: 441 }
|
{ id: 100, name: "100.png", x: 353, y: 441, input: false }
|
||||||
],
|
],
|
||||||
pos_data: [
|
pos_data: [
|
||||||
{ x: 63, y: 213 }
|
{ x: 63, y: 213 }
|
||||||
@@ -32,11 +32,12 @@ var stampImgList = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2, name: "GBF 2018聖誕節", image_data: [
|
id: 2, name: "GBF 2018聖誕節", image_data: [
|
||||||
{ id: "10", name: "10.png", x: 53, y: 420 },
|
{ id: "10", name: "10.png", x: 53, y: 420, input: false },
|
||||||
{ id: "20", name: "20.png", x: 153, y: 420 },
|
{ id: "20", name: "20.png", x: 153, y: 420, input: false },
|
||||||
{ id: "30", name: "30.png", x: 253, y: 420 },
|
{ id: "30", name: "30.png", x: 253, y: 420, input: false },
|
||||||
{ id: "100", name: "100.png", x: 353, y: 420 },
|
{ id: "100", name: "100.png", x: 353, y: 420, input: false },
|
||||||
{ id: "atama", name: "atama.png", x: 453, y: 420 },
|
{ 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: [
|
pos_data: [
|
||||||
{ x: 43, y: 219 }
|
{ x: 43, y: 219 }
|
||||||
@@ -69,6 +70,7 @@ function init() {
|
|||||||
// 背景圖片
|
// 背景圖片
|
||||||
var stampCard = new createjs.Bitmap(curPath + "main.png");
|
var stampCard = new createjs.Bitmap(curPath + "main.png");
|
||||||
stage.addChild(stampCard);
|
stage.addChild(stampCard);
|
||||||
|
|
||||||
// point
|
// point
|
||||||
stampList = [];
|
stampList = [];
|
||||||
var curStampImgList = Enumerable.from(stampImgList).where(function (obj) { return obj.id == curEventId; }).firstOrDefault().image_data;
|
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();
|
var stampData = new baseData();
|
||||||
stampData.Id = stamp.id;
|
stampData.Id = stamp.id;
|
||||||
stampData.ImageName = curPath + stamp.name;
|
stampData.ImageName = curPath + stamp.name;
|
||||||
|
stampData.input = stamp.input;
|
||||||
|
stampData.text = stamp.text;
|
||||||
stampData.ImageX = stamp.x;
|
stampData.ImageX = stamp.x;
|
||||||
stampData.ImageY = stamp.y;
|
stampData.ImageY = stamp.y;
|
||||||
stampData.setObj();
|
stampData.setObj();
|
||||||
@@ -102,18 +106,27 @@ function init() {
|
|||||||
}
|
}
|
||||||
stampData.ImageX = item.ImageX;
|
stampData.ImageX = item.ImageX;
|
||||||
stampData.ImageY = item.ImageY;
|
stampData.ImageY = item.ImageY;
|
||||||
|
stampData.input = item.input;
|
||||||
|
stampData.text = item.text;
|
||||||
stampData.IsRestore = true;
|
stampData.IsRestore = true;
|
||||||
stampData.setObj();
|
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);
|
stage.addChild(stampData.Obj);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// 測點用
|
// 測點用
|
||||||
function checkPoint(event) {
|
function checkPoint(event) {
|
||||||
console.info(stage.mouseX);
|
console.info(stage.mouseX);
|
||||||
console.info(stage.mouseY);
|
console.info(stage.mouseY);
|
||||||
}
|
}
|
||||||
stage.addEventListener("mousedown", checkPoint);
|
// stage.addEventListener("mousedown", checkPoint);
|
||||||
|
|
||||||
|
|
||||||
// tick イベントを監視します
|
// tick イベントを監視します
|
||||||
createjs.Ticker.setFPS(60);
|
createjs.Ticker.setFPS(60);
|
||||||
@@ -127,6 +140,8 @@ function baseData() {
|
|||||||
var _Func = this;
|
var _Func = this;
|
||||||
_Func.Id = "";
|
_Func.Id = "";
|
||||||
_Func.IsRestore = false;
|
_Func.IsRestore = false;
|
||||||
|
_Func.input = false;
|
||||||
|
_Func.text = "";
|
||||||
_Func.Obj = null;
|
_Func.Obj = null;
|
||||||
_Func.ImageName = "";
|
_Func.ImageName = "";
|
||||||
_Func.ImageX = 0;
|
_Func.ImageX = 0;
|
||||||
@@ -135,6 +150,8 @@ function baseData() {
|
|||||||
_Func.setObj = function () {
|
_Func.setObj = function () {
|
||||||
_Func.Obj = new createjs.Bitmap(_Func.ImageName);
|
_Func.Obj = new createjs.Bitmap(_Func.ImageName);
|
||||||
_Func.Obj.customId = _Func.Id;
|
_Func.Obj.customId = _Func.Id;
|
||||||
|
_Func.Obj.input = _Func.input;
|
||||||
|
_Func.Obj.text = _Func.text;
|
||||||
_Func.Obj.x = _Func.ImageX;
|
_Func.Obj.x = _Func.ImageX;
|
||||||
_Func.Obj.y = _Func.ImageY;
|
_Func.Obj.y = _Func.ImageY;
|
||||||
|
|
||||||
@@ -143,6 +160,7 @@ function baseData() {
|
|||||||
_Func.Obj.addEventListener("pressmove", handleMove);
|
_Func.Obj.addEventListener("pressmove", handleMove);
|
||||||
_Func.Obj.addEventListener("pressup", handleUp);
|
_Func.Obj.addEventListener("pressup", handleUp);
|
||||||
} else {
|
} else {
|
||||||
|
_Func.Obj.addEventListener("click", function () { console.info(_Func.Obj); });
|
||||||
_Func.Obj.addEventListener("dblclick", deleteSelf);
|
_Func.Obj.addEventListener("dblclick", deleteSelf);
|
||||||
}
|
}
|
||||||
_Func.Obj.cursor = 'pointer';
|
_Func.Obj.cursor = 'pointer';
|
||||||
@@ -167,14 +185,20 @@ function baseData() {
|
|||||||
var curData = [];
|
var curData = [];
|
||||||
for (var index in curStampData) {
|
for (var index in curStampData) {
|
||||||
var item = curStampData[index];
|
var item = curStampData[index];
|
||||||
if (item.Id != event.target.customId
|
var thisObj = Enumerable.from(stage.children).where(function (obj) { return obj.id === event.target.id }).firstOrDefault();
|
||||||
& item.ImageX != event.target.x
|
|
||||||
& item.ImageY != event.target.y
|
if (item.Id != thisObj.customId
|
||||||
) curData.push(item);
|
|| item.ImageX != event.target.x
|
||||||
|
|| item.ImageY != event.target.y
|
||||||
|
) {
|
||||||
|
curData.push(item);
|
||||||
|
} else {
|
||||||
|
console.info(thisObj);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
tmpStampData.data = curData;
|
tmpStampData.data = curData;
|
||||||
localStorage.data = JSON.stringify(tmpData);
|
localStorage.data = JSON.stringify(tmpData);
|
||||||
|
if (event.target.input) stage.removeChild(event.target.textObj);
|
||||||
stage.removeChild(event.target);
|
stage.removeChild(event.target);
|
||||||
}
|
}
|
||||||
function handleDown(event) {
|
function handleDown(event) {
|
||||||
@@ -208,9 +232,10 @@ function baseData() {
|
|||||||
&& event.target.y <= (item.y + 30)
|
&& event.target.y <= (item.y + 30)
|
||||||
) {
|
) {
|
||||||
var cloneObj = event.target.clone();
|
var cloneObj = event.target.clone();
|
||||||
|
cloneObj.customId = event.target.customId;
|
||||||
|
cloneObj.input = event.target.input;
|
||||||
// cloneObj.x = item.x + 8;
|
// cloneObj.x = item.x + 8;
|
||||||
// cloneObj.y = item.y + 8;
|
// cloneObj.y = item.y + 8;
|
||||||
stage.addChild(cloneObj);
|
|
||||||
var tmpData = JSON.parse(localStorage.data);
|
var tmpData = JSON.parse(localStorage.data);
|
||||||
var tmpStampData = Enumerable.from(tmpData).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
|
var tmpStampData = Enumerable.from(tmpData).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
|
||||||
if (tmpStampData == null) {
|
if (tmpStampData == null) {
|
||||||
@@ -223,9 +248,22 @@ function baseData() {
|
|||||||
tmpBase.Id = event.target.customId;
|
tmpBase.Id = event.target.customId;
|
||||||
tmpBase.ImageX = event.target.x;
|
tmpBase.ImageX = event.target.x;
|
||||||
tmpBase.ImageY = event.target.y;
|
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;
|
tmpBase.IsRestore = true;
|
||||||
cloneObj.addEventListener("dblclick", deleteSelf);
|
cloneObj.addEventListener("dblclick", deleteSelf);
|
||||||
|
|
||||||
|
|
||||||
curStampData.push(tmpBase);
|
curStampData.push(tmpBase);
|
||||||
localStorage.data = JSON.stringify(tmpData);
|
localStorage.data = JSON.stringify(tmpData);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user