创建图片库时如何解决全局变量问题?
How to get around issues with global variables when creating image gallery?
我正在尝试为 pixi.js 中的项目创建图片库点击。您可以在我的 fiddle 中看到,当您单击屏幕右侧时,它会添加下一张图片。问题是当您单击左侧删除图像时,它只会删除一个图像而不会删除其余图像。
我知道为什么会这样,因为 "image" 是一个全局变量,它只保存最后添加的图像。我的函数无法获取之前添加的图像。但是,我一直在想办法解决。谁能帮我调整我的代码?我的JS和一个fiddle在下面。
const bodyTag = document.querySelector("body")
const nextTag = document.querySelector("div.right")
const backTag = document.querySelector("div.left")
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
// Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite;
//Create a pixi application
let app = new PIXI.Application({
width: 2000,
height: 2000,
transparent: false,
antialias: true,
resolution: 1
})
//Add the canvas that Pixi automatically created for you to the html document
bodyTag.appendChild(app.view);
let image = null
let image2 = null
let imageCreated = false
let step = 0
let left = 0
var images = [
"https://i.imgur.com/HEwZDoW.jpg",
"https://i.imgur.com/F5XOYH7.jpg",
"https://i.imgur.com/e29HpQj.jpg",
"https://i.imgur.com/2FaU2fI.jpg",
"https://i.imgur.com/fsyrScY.jpg"
]
loader
.add([
images
])
const createSprite = function() {
imageCreated = true
image = new Sprite(resources[images[step]].texture)
image.width = 400;
image.height = 300;
image.x = left
app.stage.addChild(image)
step += 1
left += 40
}
const removeSprite = function() {
app.stage.removeChild(image)
step -= 1
}
loader.load((loader, resources) => {
createSprite()
})
nextTag.addEventListener("click", function() {
console.log("next")
createSprite()
})
backTag.addEventListener("click", function() {
console.log("back")
removeSprite()
})
* {
padding: 0;
margin: 0;
}
body {
margin:0;
padding:0;
overflow:hidden;
}
canvas {
display:block;
}
div.left {
position: fixed;
top: 0;
left: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
div.right {
position: fixed;
top: 0;
right: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.js"></script>
<div class="left"></div>
<div class="right"></div>
使用数组保存添加到屏幕的图像,而不是将每个图像保存到单个变量中,并且
单击左侧 div 对图像数组执行弹出,它将给出最后添加的图像并将其删除
const bodyTag = document.querySelector("body")
const nextTag = document.querySelector("div.right")
const backTag = document.querySelector("div.left")
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
// Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite;
//Create a pixi application
let app = new PIXI.Application({
width: 2000,
height: 2000,
transparent: false,
antialias: true,
resolution: 1
})
//Add the canvas that Pixi automatically created for you to the html document
bodyTag.appendChild(app.view);
//use array for storing images
let imageSet = []
let image2 = null
let imageCreated = false
let step = 0
let left = 0
var images = [
"https://i.imgur.com/HEwZDoW.jpg",
"https://i.imgur.com/F5XOYH7.jpg",
"https://i.imgur.com/e29HpQj.jpg",
"https://i.imgur.com/2FaU2fI.jpg",
"https://i.imgur.com/fsyrScY.jpg"
]
loader
.add([
images
])
const createSprite = function() {
imageCreated = true
//create an image
let image = new Sprite(resources[images[step]].texture)
image.width = 400;
image.height = 300;
image.x = left
//push created images reference into images array
imageSet.push(image)
app.stage.addChild(image)
step += 1
left += 40
}
const removeSprite = function() {
//get the last element from image array
let image = imageSet.pop();
app.stage.removeChild(image)
step -= 1
//reset left
left -= 40
}
loader.load((loader, resources) => {
createSprite()
})
nextTag.addEventListener("click", function() {
console.log("next")
createSprite()
})
backTag.addEventListener("click", function(event) {
console.log("back")
removeSprite()
})
* {
padding: 0;
margin: 0;
}
body {
margin:0;
padding:0;
overflow:hidden;
}
canvas {
display:block;
}
div.left {
position: fixed;
top: 0;
left: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
div.right {
position: fixed;
top: 0;
right: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.js"></script>
<div class="left"></div>
<div class="right"></div>
我正在尝试为 pixi.js 中的项目创建图片库点击。您可以在我的 fiddle 中看到,当您单击屏幕右侧时,它会添加下一张图片。问题是当您单击左侧删除图像时,它只会删除一个图像而不会删除其余图像。
我知道为什么会这样,因为 "image" 是一个全局变量,它只保存最后添加的图像。我的函数无法获取之前添加的图像。但是,我一直在想办法解决。谁能帮我调整我的代码?我的JS和一个fiddle在下面。
const bodyTag = document.querySelector("body")
const nextTag = document.querySelector("div.right")
const backTag = document.querySelector("div.left")
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
// Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite;
//Create a pixi application
let app = new PIXI.Application({
width: 2000,
height: 2000,
transparent: false,
antialias: true,
resolution: 1
})
//Add the canvas that Pixi automatically created for you to the html document
bodyTag.appendChild(app.view);
let image = null
let image2 = null
let imageCreated = false
let step = 0
let left = 0
var images = [
"https://i.imgur.com/HEwZDoW.jpg",
"https://i.imgur.com/F5XOYH7.jpg",
"https://i.imgur.com/e29HpQj.jpg",
"https://i.imgur.com/2FaU2fI.jpg",
"https://i.imgur.com/fsyrScY.jpg"
]
loader
.add([
images
])
const createSprite = function() {
imageCreated = true
image = new Sprite(resources[images[step]].texture)
image.width = 400;
image.height = 300;
image.x = left
app.stage.addChild(image)
step += 1
left += 40
}
const removeSprite = function() {
app.stage.removeChild(image)
step -= 1
}
loader.load((loader, resources) => {
createSprite()
})
nextTag.addEventListener("click", function() {
console.log("next")
createSprite()
})
backTag.addEventListener("click", function() {
console.log("back")
removeSprite()
})
* {
padding: 0;
margin: 0;
}
body {
margin:0;
padding:0;
overflow:hidden;
}
canvas {
display:block;
}
div.left {
position: fixed;
top: 0;
left: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
div.right {
position: fixed;
top: 0;
right: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.js"></script>
<div class="left"></div>
<div class="right"></div>
使用数组保存添加到屏幕的图像,而不是将每个图像保存到单个变量中,并且
单击左侧 div 对图像数组执行弹出,它将给出最后添加的图像并将其删除
const bodyTag = document.querySelector("body")
const nextTag = document.querySelector("div.right")
const backTag = document.querySelector("div.left")
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
// Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite;
//Create a pixi application
let app = new PIXI.Application({
width: 2000,
height: 2000,
transparent: false,
antialias: true,
resolution: 1
})
//Add the canvas that Pixi automatically created for you to the html document
bodyTag.appendChild(app.view);
//use array for storing images
let imageSet = []
let image2 = null
let imageCreated = false
let step = 0
let left = 0
var images = [
"https://i.imgur.com/HEwZDoW.jpg",
"https://i.imgur.com/F5XOYH7.jpg",
"https://i.imgur.com/e29HpQj.jpg",
"https://i.imgur.com/2FaU2fI.jpg",
"https://i.imgur.com/fsyrScY.jpg"
]
loader
.add([
images
])
const createSprite = function() {
imageCreated = true
//create an image
let image = new Sprite(resources[images[step]].texture)
image.width = 400;
image.height = 300;
image.x = left
//push created images reference into images array
imageSet.push(image)
app.stage.addChild(image)
step += 1
left += 40
}
const removeSprite = function() {
//get the last element from image array
let image = imageSet.pop();
app.stage.removeChild(image)
step -= 1
//reset left
left -= 40
}
loader.load((loader, resources) => {
createSprite()
})
nextTag.addEventListener("click", function() {
console.log("next")
createSprite()
})
backTag.addEventListener("click", function(event) {
console.log("back")
removeSprite()
})
* {
padding: 0;
margin: 0;
}
body {
margin:0;
padding:0;
overflow:hidden;
}
canvas {
display:block;
}
div.left {
position: fixed;
top: 0;
left: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
div.right {
position: fixed;
top: 0;
right: 0;
width: 50vw;
height: 100vh;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.js"></script>
<div class="left"></div>
<div class="right"></div>