文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript事件侦听器和数组

问Javascript事件侦听器和数组
EN

Stack Overflow用户

提问于 2020-12-08 17:15:49

回答 2查看 84关注 0票数 2

我正在尝试用3个按钮触发的数组中的3个图像来重新创建一个抓取到显示的图像效果。我的事件侦听器没有工作，正如您所看到的，无论按钮是什么，它都会显示相同的显示图像。事件侦听器的语法让我有点困惑，我希望在这方面能得到一些帮助。

草图图像覆盖在整个过程中是相同的。你能告诉我哪里出错了吗？

它有很多代码，很抱歉，但我认为最好把所有的细节都放进去。提前谢谢你！

const imgArr = [{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background1: 'https://images.pexels.com/photos/1666012/pexels-photo-1666012.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
  },
  {
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background2: 'https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
  },
  {
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background3: 'https://images.pexels.com/photos/2365457/pexels-photo-2365457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
  },
]

const btn = document.querySelector('#special'),
  bridge = document.querySelector("#bridge"),
  bridgeCanvas = bridge.getContext('2d'),
  brushRadius = (bridge.width / 100) * 7;

// default image
img = new Image();
img.onload = function() {
  bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
}
img.src = 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png'


btn.addEventListener('click', () => {
  img.src = imgArr[background1].sketch
  bridge.style.background1 = `url(${imgArr[background1].background1})`;
  bridge.style.backgroundSize = 'cover';
  bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
  bridgeCanvas.globalCompositeOperation = "destination-over";
})

btn.addEventListener('click', () => {
  img.src = imgArr[background2].sketch
  bridge.style.background2 = `url(${imgArr[background2].background2})`;
  bridge.style.backgroundSize = 'cover';
  bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
  bridgeCanvas.globalCompositeOperation = "destination-over";
})

function getBrushPos(xRef, yRef) {
  const bridgeRect = bridge.getBoundingClientRect();
  return {
    x: Math.floor((xRef - bridgeRect.left) / (bridgeRect.right - bridgeRect.left) * bridge.width),
    y: Math.floor((yRef - bridgeRect.top) / (bridgeRect.bottom - bridgeRect.top) * bridge.height)
  };
}

function drawDot(mouseX, mouseY) {
  bridgeCanvas.beginPath();
  bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
  bridgeCanvas.globalCompositeOperation = "destination-out";
  bridgeCanvas.fill();
}


bridge.addEventListener("mousemove", (e) => {
  let brushPos = getBrushPos(e.clientX, e.clientY);
  if (e.which === 1) {
    drawDot(brushPos.x, brushPos.y);
  }
}, false);

bridge.addEventListener("touchmove", function(e) {
  let touch = e.targetTouches[0];
  if (touch) {
    let brushPos = getBrushPos(touch.pageX, touch.pageY);
    drawDot(brushPos.x, brushPos.y);
  }
}, false);

body {
  margin: 0;
}

#bridge {
  margin: 0 auto;
  background-image: url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png');
  background-image: -webkit-image-set(url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png') 2x);
  background-size: cover;
  width: 100%;
  max-width: 750px;
  height: auto;
  cursor: crosshair;
  cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png') 53 53, crosshair;
}

#bridgeContainer {
  text-align: center;
  font-family: Avenir, sans-serif;
}

#bridgeContainer figcaption {
  margin-top: 2rem;
}

#special {
  background-color: blue;
  color: white;
  border: none;
  outline: none;
  border-radius: 1.5rem;
  font-size: larger;
  padding: .5rem 1rem;
}

#special2 {
  background-color: blue;
  color: white;
  border: none;
  outline: none;
  border-radius: 1.5rem;
  font-size: larger;
  padding: .5rem 1rem;
}

#special3 {
  background-color: blue;
  color: white;
  border: none;
  outline: none;
  border-radius: 1.5rem;
  font-size: larger;
  padding: .5rem 1rem;
}

<figure id="bridgeContainer">
  <canvas id="bridge" width="750" height="465"></canvas>
</figure>
<button id="special">Color1</button>
<button id="special2">Color2</button>
<button id="special3">Color3</button>

javascript

html

jquery

css

user-interaction

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-08 18:00:15

看看我在EventListener中所做的更改。

我所做的更改是:在按钮上添加了类，以便可以一起选择它们。当放置listener for循环时，还会将"date“信息放在按钮上。此信息是对应于Array记录的序列号

const imgArr = [{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background: 'https://images.pexels.com/photos/1666012/pexels-photo-1666012.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background: 'https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background: 'https://images.pexels.com/photos/2365457/pexels-photo-2365457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
]

const btn = document.querySelectorAll('.special'),
    bridge = document.querySelector("#bridge"),
    bridgeCanvas = bridge.getContext('2d'),
    brushRadius = (bridge.width / 100) * 7;

// default image
img = new Image();
img.onload = function () {
    bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
}
img.src = 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png'


for (var i = 0; i < imgArr.length; i++) {
    btn[i].setAttribute('data', i);
    btn[i].addEventListener("click", function () {
        myFunc(this);
    });
}

function myFunc(x) {
    var arr = x.getAttribute('data');
    img.src = imgArr[arr].sketch
    bridge.style.background = `url(${imgArr[arr].background})`;
    bridge.style.backgroundSize = 'cover';
    bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
    bridgeCanvas.globalCompositeOperation = "destination-over";
}

function getBrushPos(xRef, yRef) {
    const bridgeRect = bridge.getBoundingClientRect();
    return {
        x: Math.floor((xRef - bridgeRect.left) / (bridgeRect.right - bridgeRect.left) * bridge.width),
        y: Math.floor((yRef - bridgeRect.top) / (bridgeRect.bottom - bridgeRect.top) * bridge.height)
    };
}

function drawDot(mouseX, mouseY) {
    bridgeCanvas.beginPath();
    bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
    bridgeCanvas.globalCompositeOperation = "destination-out";
    bridgeCanvas.fill();
}


bridge.addEventListener("mousemove", (e) => {
    let brushPos = getBrushPos(e.clientX, e.clientY);
    if (e.which === 1) {
        drawDot(brushPos.x, brushPos.y);
    }
}, false);

bridge.addEventListener("touchmove", function (e) {
    let touch = e.targetTouches[0];
    if (touch) {
        let brushPos = getBrushPos(touch.pageX, touch.pageY);
        drawDot(brushPos.x, brushPos.y);
    }
}, false);

body {
    margin: 0;
}

#bridge {
    margin: 0 auto;
    background-image: url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png');
    background-image: -webkit-image-set(url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png') 2x);
    background-size: cover;
    width: 100%;
    max-width: 750px;
    height: auto;
    cursor: crosshair;
    cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png') 53 53, crosshair;
}

#bridgeContainer {
    text-align: center;
    font-family: Avenir, sans-serif;
}

#bridgeContainer figcaption {
    margin-top: 2rem;
}

#special {
    background-color: blue;
    color: white;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    font-size: larger;
    padding: .5rem 1rem;
}

#special2 {
    background-color: blue;
    color: white;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    font-size: larger;
    padding: .5rem 1rem;
}

#special3 {
    background-color: blue;
    color: white;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    font-size: larger;
    padding: .5rem 1rem;
}

<figure id="bridgeContainer">
    <canvas id="bridge" width="750" height="465"></canvas>
</figure>
<button id="special" class="special">Color1</button>
<button id="special2" class="special">Color2</button>
<button id="special3" class="special">Color3</button>

票数 2

Stack Overflow用户

发布于 2020-12-08 17:58:33

您的代码中有多个错误。首先，您正在尝试访问未定义background1的imgArrbackground1。相反，您应该尝试按索引访问，如0,1,2。您没有任何其他2个按钮的事件侦听器。最后一件事是，您应该将新图像分配给bridge.style.background，而不是将新图像分配给bridge.style.background1。您的草图图像是相同的，因为在imgArr中所有的草图图像都是相同的，即sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png'。试试下面的代码片段。

const imgArr = [{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background1: 'https://images.pexels.com/photos/1666012/pexels-photo-1666012.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
  },
  {
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background2: 'https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
  },
  {
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background3: 'https://images.pexels.com/photos/2365457/pexels-photo-2365457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
  },
]

const btn = document.querySelector('#special'),
btn1 = document.querySelector('#special2'),
btn2 = document.querySelector('#special3')
  bridge = document.querySelector("#bridge"),
  bridgeCanvas = bridge.getContext('2d'),
  brushRadius = (bridge.width / 100) * 7;

// default image
img = new Image();
img.onload = function() {
  bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
}
img.src = 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png'


btn.addEventListener('click', () => {
  img.src = imgArr[0].sketch
  bridge.style.background = `url(${imgArr[0].background1})`;
  bridge.style.backgroundSize = 'cover';
  bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
  bridgeCanvas.globalCompositeOperation = "destination-over";
})

btn1.addEventListener('click', () => {
  img.src = imgArr[1].sketch
  bridge.style.background = `url(${imgArr[1].background2})`;
  bridge.style.backgroundSize = 'cover';
  bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
  bridgeCanvas.globalCompositeOperation = "destination-over";
})

btn2.addEventListener('click', () => {
  img.src = imgArr[2].sketch
  bridge.style.background = `url(${imgArr[2].background3})`;
  bridge.style.backgroundSize = 'cover';
  bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
  bridgeCanvas.globalCompositeOperation = "destination-over";
})

function getBrushPos(xRef, yRef) {
  const bridgeRect = bridge.getBoundingClientRect();
  return {
    x: Math.floor((xRef - bridgeRect.left) / (bridgeRect.right - bridgeRect.left) * bridge.width),
    y: Math.floor((yRef - bridgeRect.top) / (bridgeRect.bottom - bridgeRect.top) * bridge.height)
  };
}

function drawDot(mouseX, mouseY) {
  bridgeCanvas.beginPath();
  bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
  bridgeCanvas.globalCompositeOperation = "destination-out";
  bridgeCanvas.fill();
}


bridge.addEventListener("mousemove", (e) => {
  let brushPos = getBrushPos(e.clientX, e.clientY);
  if (e.which === 1) {
    drawDot(brushPos.x, brushPos.y);
  }
}, false);

bridge.addEventListener("touchmove", function(e) {
  let touch = e.targetTouches[0];
  if (touch) {
    let brushPos = getBrushPos(touch.pageX, touch.pageY);
    drawDot(brushPos.x, brushPos.y);
  }
}, false);

body {
  margin: 0;
}

#bridge {
  margin: 0 auto;
  background-image: url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png');
  background-image: -webkit-image-set(url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png') 2x);
  background-size: cover;
  width: 100%;
  max-width: 750px;
  height: auto;
  cursor: crosshair;
  cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png') 53 53, crosshair;
}

#bridgeContainer {
  text-align: center;
  font-family: Avenir, sans-serif;
}

#bridgeContainer figcaption {
  margin-top: 2rem;
}

#special {
  background-color: blue;
  color: white;
  border: none;
  outline: none;
  border-radius: 1.5rem;
  font-size: larger;
  padding: .5rem 1rem;
}

#special2 {
  background-color: blue;
  color: white;
  border: none;
  outline: none;
  border-radius: 1.5rem;
  font-size: larger;
  padding: .5rem 1rem;
}

#special3 {
  background-color: blue;
  color: white;
  border: none;
  outline: none;
  border-radius: 1.5rem;
  font-size: larger;
  padding: .5rem 1rem;
}

<figure id="bridgeContainer">
  <canvas id="bridge" width="750" height="465"></canvas>
</figure>
<button id="special">Color1</button>
<button id="special2">Color2</button>
<button id="special3">Color3</button>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65196157

复制

相似问题

问Javascript事件侦听器和数组
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript事件侦听器和数组EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript事件侦听器和数组
EN