變更為自訂背景圖片

This commit is contained in:
2019-01-03 17:09:14 +09:00
parent 7e92f5e95a
commit d24f70b93e
2 changed files with 16 additions and 12 deletions

18
gbf.js
View File

@@ -1,4 +1,5 @@
var stage = null; var jsVer = 201812280712 ;
var stage = null;
var canvas = null; var canvas = null;
var stampList = []; var stampList = [];
if (typeof (localStorage.data) == "undefined") localStorage.data = "[]"; if (typeof (localStorage.data) == "undefined") localStorage.data = "[]";
@@ -7,7 +8,8 @@ if (typeof (localStorage.data) == "undefined") localStorage.data = "[]";
// 定義基本資料 // 定義基本資料
var stampImgList = [ var stampImgList = [
{ {
id: 1, name: "GBF 2018四周年", image_data: [ id: 1, name: "GBF 2018四周年", back:"main.png", width:742, height:581
, image_data: [
{ id: 10, name: "10.png", x: 53, y: 441, input: false }, { id: 10, name: "10.png", x: 53, y: 441, input: false },
{ id: 20, name: "20.png", x: 153, 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: 30, name: "30.png", x: 253, y: 441, input: false },
@@ -31,7 +33,8 @@ var stampImgList = [
] ]
}, },
{ {
id: 2, name: "GBF 2018聖誕節", image_data: [ id: 2, name: "GBF 2018聖誕節", back:"main.png", width:713, height:519
, image_data: [
{ id: "10", name: "10.png", x: 53, y: 420, input: false }, { id: "10", name: "10.png", x: 53, y: 420, input: false },
{ id: "20", name: "20.png", x: 153, 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: "30", name: "30.png", x: 253, y: 420, input: false },
@@ -62,13 +65,16 @@ var stampImgList = [
function init() { function init() {
var curEventId = $("select[name=EventList]").val(); var curEventId = $("select[name=EventList]").val();
var curPath = "./" + curEventId + "/" var curPath = "./" + curEventId + "/"
var curEventData = Enumerable.from(stampImgList).where(function (obj) { return obj.id == curEventId; }).firstOrDefault();
document.getElementById("gbfCanvas").width = curEventData.width ;
document.getElementById("gbfCanvas").height = curEventData.height ;
canvas = document.querySelector('#gbfCanvas'); canvas = document.querySelector('#gbfCanvas');
stage = new createjs.Stage("gbfCanvas"); stage = new createjs.Stage("gbfCanvas");
stage.enableMouseOver(); stage.enableMouseOver();
// 背景圖片 // 背景圖片
var stampCard = new createjs.Bitmap(curPath + "main.png"); var stampCard = new createjs.Bitmap(curPath + curEventData.back + "?_=" + jsVer);
stage.addChild(stampCard); stage.addChild(stampCard);
// point // point
@@ -79,7 +85,7 @@ 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 + "?_=" + jsVer;
stampData.input = stamp.input; stampData.input = stamp.input;
stampData.text = stamp.text; stampData.text = stamp.text;
stampData.ImageX = stamp.x; stampData.ImageX = stamp.x;
@@ -160,7 +166,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("click", function () { console.info(_Func.Obj); });
_Func.Obj.addEventListener("dblclick", deleteSelf); _Func.Obj.addEventListener("dblclick", deleteSelf);
} }
_Func.Obj.cursor = 'pointer'; _Func.Obj.cursor = 'pointer';

View File

@@ -1,19 +1,17 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script src="https://www.solamimi.org/js/jquery.js"></script> <script src="https://www.solamimi.org/js/jquery.js"></script>
<script src="https://www.solamimi.org/js/linq.min.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="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="gbf.js?_=201812271233"></script> <script src="gbf.js?_=201812271233"></script>
<title>GBF Stamp帳</title>
<style> <style>
#myCanvas.mouseon{ #myCanvas.mouseon{
cursor: pointer; cursor: pointer;
} }
</style> </style>
</head> </head>
<body> <body>
活動選擇: 活動選擇:
<select name="EventList"> <select name="EventList">