Touch-friendly tarjeta Scratch con Pure JavaScript-ScratchCard

Vista prévia

Descripción

ScratchCard es una biblioteca de JavaScript de dependencia cero que aprovecha el lienzo de HTML5 para generar una tarjeta táctil y muy personalizable que se rasca en la página.

Funcionamiento

Compile el código HTML para la tarjeta de memoria virtual.

<div class="scratch_container">

<div class="scratch_viewport">


<!-- result picture -->


<canvas id="js-scratch-canvas"></canvas>

</div>
</div>

Los principales estilos CSS.

.scratch_container {

position: relative;

margin: 0 auto;

max-width: 1024px;
}

.scratch_viewport {

position: relative;

width: 250px;

height: 250px;

margin: 0 auto;

z-index: 0;
}

.scratch_picture-under {

position: absolute;

top: 0;

left: 0;

display: block;

z-index: -1;
}

.scratch_container canvas {

position: relative;

width: 100%;

height: auto;

z-index: 1;
}

Cree un nuevo objeto Scratch y pase las opciones como un objeto como este:

var scratch = new Scratch({


canvasId: 'js-scratch-canvas',


imageBackground: 'loose.jpg',


pictureOver: 'foreground.jpg',


cursor: {




png: 'piece.png',




cur: 'piece.cur',




x: '20',




y: '17'


},


radius: 20,


nPoints: 100,


percent: 50,


callback: function () {



alert('I am Callback.');


},


pointSize: { x: 3, y: 3}
});

Todos los ajustes predeterminados.

scratchType: SCRATCH_TYPE, // BRUSH, SPRAY, or CIRCLE
containerWidth: number,
containerHeight: number,
imageForwardSrc: string,
imageBackgroundSrc: string,
htmlBackground: string,
clearZoneRadius: number,
nPoints: number,
pointSize: number,
percentToFinish: number
callback ?: () => void,
brushSrc: string,
cursor: {

cur: string,

png: string,

poosition: number[]
},
enabledPercentUpdate: boolean

Registro de cambios

v1.4.6 (09/13/2018)

• Bugfix