Как обойти проблемы с глобальными переменными при создании галереи изображений? - PullRequest
Новая
       25

Как обойти проблемы с глобальными переменными при создании галереи изображений?

1 голос
/ 22 марта 2019

Я пытаюсь создать клик по галерее изображений для проекта в pixi.js.Вы можете увидеть в моей скрипке, когда вы нажимаете на правой стороне экрана, он добавляет следующее изображение.Проблема в том, что при нажатии слева, чтобы удалить изображение, оно удалит только одно, а не остальные.

Я знаю, почему это происходит, потому что «изображение» - это глобальная переменная, в которой содержится только последнее добавленное изображение.Моя функция не может получить изображения, которые были добавлены перед этим.Однако я застрял, пытаясь придумать обходной путь.Может ли кто-нибудь помочь мне настроить мой код?Мой JS и скрипка ниже. 

  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>

1 Ответ

0 голосов
/ 22 марта 2019

Используйте массив для хранения изображений, которые добавляются на экран, вместо того, чтобы удерживать каждое изображение в одной переменной, и

при щелчке по левому элементу 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>
...