alyoshark / vue-scratchcard Goto Github PK
View Code? Open in Web Editor NEWA Vue.js component that displays a scratchcard
License: MIT License
A Vue.js component that displays a scratchcard
License: MIT License
Emitting custom events is more declarative and the "Vue" way.
Docs source: https://vuejs.org/v2/guide/components-custom-events.html
So in the end the user will get something like this:
<scratch-card @complete="triggerAlert()" ...>...</scratch-card>
I have a total of 9 cards iterated with v-for
when all 9 cards are fully scratched I want to alert something to the user, how do I do it?
currently when any one of the card is scratched @complete event works
Related to #5
I changed the code a little bit to support transparent images too. Please check it out.
Basically, when assigned, I count the non-transparent pixels (for an image with transparent pixels this is import). Then when evaluating the reveal percentage, I count the non-transparent pixels again, and compare it to the original. That way you always have a correct percentage.
the new method:
function getTotalPixels(ctx, width, height, stride) {
if (!stride || stride < 1) stride = 1;
const pixels = ctx.getImageData(0, 0, width, height);
let total = 0;
for (let i = 0; i < pixels.data.length; i += stride) {
if (parseInt(pixels.data[i], 10) !== 0) total++;
}
return total;
}
the modified methods:
function getFilledPercent(ctx, width, height, total, stride) {
if (!stride || stride < 1) stride = 1;
const pixels = ctx.getImageData(0, 0, width, height);
let count = 0;
for (let i = 0; i < pixels.data.length; i += stride) {
if (parseInt(pixels.data[i], 10) !== 0) count++;
}
return 100 - Math.round(count / total * 100);
}
an extra data value must be added:
totalPixels: 0
drawImage() {
const image = new Image();
image.crossOrigin = 'Anonymous';
image.src = this.imageUrl;
image.onload = () => {
this.ctx.drawImage(image, 0, 0, this.cardWidth, this.cardHeight);
this.overlayLoaded = true;
this.totalPixels = getTotalPixels(this.ctx, this.cardWidth, this.cardHeight, 32);
};
},
handleMouseMove(e) {
...
this.handlePercentage(
getFilledPercent(this.ctx, this.cardWidth, this.cardHeight, this.totalPixels, 32),
);
},
And a small bug, where you can now set 100 as reveal percentage as well:
handlePercentage(filledInPixels = 0) {
if (filledInPixels >= this.finishPercent) this.reveal();
},
With this you can now use a background image for the revealed image, and a image with transparent pixels but with a small part as the scratch area. Please find attached these two files as an example:
Great component; you now have a property to reveal; but how about a property to reset it again?
Sorry but I do not understand how to use the library,
You're importing a component from SRC
????
What should be in it?
I would love for more explanation
Under Firefox Android, the mouseevent for the canvas is not triggered after the page is scrolled. However it still works well when the scroll position is at the top of the page.
I'm using Vue 2
this is my code
<template>
<div>
<div>click</div>
<scratch-card
:key="renderCount"
:cardWidth="cardWidth"
:cardHeight="cardHeight"
:finishPercent="finishPercent"
imageUrl="https://i.imgur.com/zdFRqJI.png"
:forceReveal="forceReveal"
@complete="onComplete"
>
<div class="tile-block w-48 h-48"></div>
</scratch-card>
</div>
</template>
<script>
import ScratchCard from "vue-scratchcard";
// const onComplete = () => window.alert('Content revealed!');
export default {
name: "HelloWorld",
components: {
ScratchCard
},
data() {
return {
cards: [
{ score: "1" },
{ score: "2" },
{ score: "3" },
{ score: "4" },
{ score: "5" },
{ score: "6" },
{ score: "7" },
{ score: "8" },
{ score: "9" }
],
renderCount: 0,
cardWidth: 140,
cardHeight: 140,
finishPercent: 100,
forceReveal: false
};
},
props: {
msg: String
},
methods: {
onComplete() {
// `this` will refer to the component instance
window.alert("Content revealed!");
}
}
};
</script>
It seems that the component uses the original size of the image to calculate finishPercent instead of "canvas pixels". Can you confirm that?
Right now, I'm using a canvas size bigger than the size of the image, so the image gets resized. Because of that, if the image is small, the reveal is triggered very fast, sometimes only with a touch.
What would it take to use the canvas size instead of the image size to force the reveal?
I'm going to try to get a Codepen replication this issue as soon as possible. In the mean time, if you have any feedback regarding this, it would be great.
Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.