editoramoan/jean-jogos-brincadeiras
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

INÍCIO

Browse Source
This commit is contained in:
Rafael Tavares Juliani committed 2025-09-04 15:42:21 -03:00
commit 1b93182afd
193 files changed
+23098
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

scripts/pincelCursor.svg
Executable
+356
View File
@@ -0,0 +1,356 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 26 24"
version="1.1"
id="svg107"
sodipodi:docname="pincelCursor.svg"
width="26"
height="24"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview109"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
width="50px"
height="338.15747px"
inkscape:zoom="9.9248152"
inkscape:cx="33.501883"
inkscape:cy="14.962495"
inkscape:window-width="2560"
inkscape:window-height="1016"
inkscape:window-x="1280"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="g1056" />
<defs
id="defs71">
<filter
id="j"
x="-0.044440174"
y="-0.092326386"
width="1.0888803"
height="1.1846528">
<feGaussianBlur
stdDeviation="2.71585"
id="feGaussianBlur2" />
</filter>
<filter
id="a"
x="-0.032931642"
y="-0.52953754"
width="1.0658633"
height="2.0590751">
<feGaussianBlur
stdDeviation="3.11451"
id="feGaussianBlur5" />
</filter>
<filter
id="o"
x="-0.033086155"
y="-0.52838945"
width="1.0661723"
height="2.0567789">
<feGaussianBlur
stdDeviation="3.11451"
id="feGaussianBlur8" />
</filter>
<filter
id="n"
x="-0.037007215"
y="-1.3226785"
width="1.0740144"
height="3.645357">
<feGaussianBlur
stdDeviation="4.71071"
id="feGaussianBlur11" />
</filter>
<filter
id="i"
x="-0.077780968"
y="-0.435747"
width="1.1555619"
height="1.871494">
<feGaussianBlur
stdDeviation="3.78372"
id="feGaussianBlur14" />
</filter>
<filter
id="m"
x="-0.056568053"
y="-0.31690733"
width="1.1131361"
height="1.6338147">
<feGaussianBlur
stdDeviation="2.7518"
id="feGaussianBlur17" />
</filter>
<filter
id="l"
x="-0.045562335"
y="-0.14240516"
width="1.0911247"
height="1.2848103">
<feGaussianBlur
stdDeviation="2.29843"
id="feGaussianBlur20" />
</filter>
<filter
id="k"
x="-0.084399192"
y="-0.49010235"
width="1.1687984"
height="1.9802047">
<feGaussianBlur
stdDeviation="3.17668"
id="feGaussianBlur23" />
</filter>
<linearGradient
id="h"
x1="778.52002"
x2="835.71002"
y1="244.14"
y2="317.10001"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#c87137"
offset="0"
id="stop26" />
<stop
stop-color="#160d06"
offset="1"
id="stop28" />
</linearGradient>
<linearGradient
id="g"
x1="1173.1"
x2="1173.4"
y1="224.34"
y2="331.10999"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#d45500"
offset="0"
id="stop31" />
<stop
offset="1"
id="stop33" />
</linearGradient>
<linearGradient
id="f"
x1="900.27002"
x2="900.15002"
y1="242.45"
y2="284.17999"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#16272c"
offset="0"
id="stop36" />
<stop
stop-color="#d5f6ff"
offset=".5"
id="stop38" />
<stop
stop-color="#00222b"
offset="1"
id="stop40" />
</linearGradient>
<linearGradient
id="e"
x1="1386.2"
x2="1386.3"
y1="288.54001"
y2="231.75"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#001017"
offset="0"
id="stop43" />
<stop
stop-color="#afdde9"
offset=".46478"
id="stop45" />
<stop
stop-color="#0b2228"
offset="1"
id="stop47" />
</linearGradient>
<linearGradient
id="d"
x1="918.25"
x2="917.33002"
y1="281.73001"
y2="244.77"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#00112b"
offset="0"
id="stop50" />
<stop
stop-color="#afdde9"
offset=".49374"
id="stop52" />
<stop
stop-color="#00112b"
offset="1"
id="stop54" />
</linearGradient>
<linearGradient
id="c"
x1="949.20001"
x2="950.20001"
y1="239.62"
y2="285.48001"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#00112b"
offset="0"
id="stop57" />
<stop
stop-color="#afdde9"
offset=".5"
id="stop59" />
<stop
stop-color="#00112b"
offset="1"
id="stop61" />
</linearGradient>
<linearGradient
id="b"
x1="761.08002"
x2="860.54999"
y1="250.09"
y2="233.17999"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#fff"
offset="0"
id="stop64" />
<stop
stop-color="#d45500"
offset=".5"
id="stop66" />
<stop
stop-color="#520"
offset="1"
id="stop68" />
</linearGradient>
</defs>
<g
transform="matrix(0.0685185,-0.0290484,0.0290484,0.0685185,-53.851746,25.831336)"
id="g105">
<g
id="g1056"
transform="matrix(0.4790745,-0.31611603,-0.31611603,-0.4790745,518.52485,786.24184)">
<g
id="g1096"
transform="rotate(-95.20302,1230.2608,383.02385)">
<g
id="g1076">
<g
id="g1057">
<path
d="m 699.22,310.45 c 38.589,-17.326 149.46,47.509 171.99,-29.293 20.51,-69.911 -54.159,-84.752 -105.46,-46.622 -51.648,38.373 -67.454,77.587 -66.532,75.916 z"
fill="url(#h)"
id="path73"
style="fill:url(#h)" />
<path
d="m 1401.4,263.08 c 0,26.036 -107.45,47.143 -240,47.143 -132.55,0 -240,-21.107 -240,-47.143 0,-26.036 107.45,-47.143 240,-47.143 132.55,0 240,21.107 240,47.143 z"
fill="url(#g)"
fill-rule="evenodd"
id="path75"
style="fill:url(#g)" />
<path
d="m 863.43,244.09 115.99,-11.448 c -2.8996,19.536 -2.5158,39.928 0,60.877 L 863.43,282.786 c -2.8237,-11.412 -4.1903,-23.547 0,-38.696 z"
fill="url(#f)"
fill-rule="evenodd"
id="path77"
style="fill:url(#f)" />
<path
d="m 1340.8,231.75 v 62.656 l 57.406,-7.4062 c 0.8934,0.1097 1.7948,0.1875 2.7187,0.1875 h 36.313 c 12.17,0 21.969,-9.7987 21.969,-21.969 0,-12.1703 -9.7987,-21.969 -21.969,-21.969 h -36.313 c -0.6443,0 -1.2763,0.0399 -1.9062,0.0937 l -58.219,-11.594 z"
fill="url(#e)"
fill-rule="evenodd"
id="path79"
style="fill:url(#e)" />
<path
d="m 927,237.81 -14.5,1.4375 c -4.9136,16.84 -2.9836,32.539 0,48.062 l 14.5,1.3438 c -3.1294,-17.517 -4.1722,-34.654 0,-50.844 z"
fill="url(#d)"
fill-rule="evenodd"
id="path81"
style="fill:url(#d)" />
<path
d="m 1043.3,287.4 c 73.143,5.9132 156.65,8.826 226.98,0.70711 -57.737,14.108 -117.55,21.576 -226.98,-0.70711 z"
fill="#ff9955"
filter="url(#a)"
opacity="0.196"
id="path83" />
<path
d="m 1045.3,234.05 c 73.143,-5.9132 156.65,-8.826 226.98,-0.70711 -57.737,-14.108 -117.55,-21.576 -226.98,0.70711 z"
fill="#ff9955"
filter="url(#a)"
opacity="0.196"
id="path85" />
<path
d="m 1043.3,269.29 c 73.143,5.9132 156.65,8.826 226.98,0.70711 -57.737,14.108 -117.55,21.576 -226.98,-0.70711 z"
fill="#ff9955"
filter="url(#a)"
opacity="0.196"
id="path87" />
<path
d="m 1047.2,250.5 c 75.307,12.083 150.61,10.882 225.92,0.35355 -75.307,-7.2153 -150.61,-8.2125 -225.92,-0.35355 z"
fill="#ff9955"
filter="url(#o)"
opacity="0.196"
id="path89" />
<path
d="m 979.44,232.62 -38.438,3.8125 c -2.6766,17.967 -2.6164,35.667 0,53.5 l 38.438,3.5625 c -2.5483,-20.398 -3.0973,-40.712 0,-60.875 z"
fill="url(#c)"
fill-rule="evenodd"
id="path91"
style="fill:url(#c)" />
<path
d="m 1000.5,261.8 c 95.604,-5.108 208.83,-6.6325 305.5,1.1213 -101.44,3.308 -203,5.4722 -305.5,-1.1213 z"
fill="#dbe2e3"
filter="url(#n)"
opacity="0.68"
id="path93" />
<path
d="m 860.55,233.18 c -77.957,-30.97 -125.98,35.538 -146.67,62.549 36.511,-44.178 79.732,-80.502 146.67,-62.549 z"
fill="url(#b)"
filter="url(#j)"
id="path95"
style="fill:url(#b)" />
<path
d="m 857.25,283.86 c -17.431,24.733 -91.419,15.389 -116.75,11 16.961,6.7078 113.14,23.03 116.75,-11 z"
fill="#2b1100"
filter="url(#i)"
id="path97" />
<path
d="m 857.25,291.86 c -17.431,24.733 -91.419,15.389 -116.75,11 16.961,6.7078 113.14,23.03 116.75,-11 z"
filter="url(#m)"
id="path99" />
<path
d="m 740.69,283.68 c 18.361,-26.522 77.862,-48.602 121.07,-34.172 -37.379,-7.1281 -91.201,9.9524 -121.07,34.172 z"
fill="#c87137"
filter="url(#l)"
id="path101" />
<path
d="m 759.26,285.03 c 23.901,-7.7761 53.292,-11.241 90.333,-15.556 -32.451,8.41 -64.978,12.112 -90.333,15.556 z"
fill="#502d16"
filter="url(#k)"
id="path103" />
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

scripts/pintarTela.js
Executable
+289
View File
@@ -0,0 +1,289 @@
//
// 1 - Crie um outro script js e coloque -> "var js_el_um = document.getElementById('el_um');" para selecionar um canvas com id igual a "el_um". Você pode configurar a tag canvas da maneira que quiser no html.
// 2 - Crie uma nova instância do objeto pintarTela, passando o elemento guardado na variável "js_el_um". Exemplo -> "var programa_um_criado = new pintarTela(js_el_um);"
//
// Opcionalmente, você pode colocar uma image a ser pintada dentro do programa. Para isso, você precisará da url da imagem e passar como segundo parâmetro do objeto pintarTela. Como exemplo, vamos criar uma segunda instância do programa:
//
// var js_el_dois = document.getElementById('el_dois');
// var img2_url ="img/img2.svg";
// var programa_dois_criado = new pintarTela(js_el_dois, img2_url);
//
//   Se você quiser redimensionar uma imagem em um mesmo canvas, use a função retornada ao rodar o objeto canvas (programa). Exemplo:
//  
//   Vamos supor que o tamanho do canvas em programa_dois_criado foi alterado. Como pintarTela() retorna a função desenharImagem, com o primeiro parâmetro a ser passado é a nova largura e o segundo, a nova altura, podemos colocar programa_dois_criado(NovaLargura, NovaAltura)
function pintarTela(el, img_url){
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var cor = "rgba(0,0,0,0.3)";
var espessura = 2;
canvas = el;
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
//movimento do mouse
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
//movimento do dedo em dispositivos touchscreen
canvas.addEventListener("touchmove", function (e) {
findFingerXY('arrastando', e)
}, false);
canvas.addEventListener("touchstart", function (e) {
findFingerXY('inicio', e)
}, false);
canvas.addEventListener("touchend", function (e) {
findFingerXY('fim', e)
}, false);
function desenharImagem(ImgL, ImgA){
var base_image = new Image();
base_image.src = img_url
base_image.onload = function(){
if(ImgL && ImgA){
ctx.clearRect(0, 0, w, h); //apaga o canvas anterior
ctx.drawImage(base_image, 0, 0, ImgL, ImgA);
} else {
ctx.drawImage(base_image, 0, 0);
}
}//fechar base_image.onload
} //Fecha desenharImagem
if(img_url){ desenharImagem();}
//criar os controladores
var controles = document.createElement("div");
var seletor_de_cor = document.createElement("input");
var seletor_de_espessura = document.createElement("input");
seletor_de_cor.type = "color";
seletor_de_cor.value = "#000";
seletor_de_espessura.type = "range";
seletor_de_espessura.value = "2";
seletor_de_espessura.min = "1";
seletor_de_espessura.max = "20";
controles.appendChild(seletor_de_cor);
controles.appendChild(seletor_de_espessura);
//aparência do programa Pintar Tela
                   el.style = "border: solid 1px; cursor: url('scripts/pincelCursor.svg'), auto; display: block; margin: auto;";//Imagem do usuário OpenClipart-Vectors do Pixabay
                   var posXel = el.offsetLeft;
var controlesESTILO = "margin: 5px auto 30px auto; padding: 10px; box-sizing: border-box; background-color: #dbdbdb; border-radius: 3px; display: flex; flex-direction: row; align-items: center; justify-content: center; width: "+w+"px; text-align: center;";
controles.style = controlesESTILO;
seletor_de_cor.style = "width: 40px; height: 40px; margin-left: 10px; cursor: pointer;";
seletor_de_espessura.style = "width: 100px; height: 40px; margin-left: 10px; cursor: pointer;";
//adicionando os controles no documento após o canvas
el.parentNode.insertBefore(controles, el.nextSibling);
function hexToRgbA(hex){
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.4)';
}
throw new Error('Bad Hex');
}
function mudarCor() {
var nova_cor = hexToRgbA(seletor_de_cor.value);
cor = nova_cor;
}
function mudarEspessura() {
espessura = seletor_de_espessura.value;
}
//Escutar quando a cor muda
seletor_de_cor.addEventListener('change', function(){
mudarCor(seletor_de_cor);
});
//Escutar quando a espessura muda
seletor_de_espessura.addEventListener('input', function(){
mudarEspessura();
});
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = cor;
ctx.lineWidth = espessura;
ctx.stroke();
ctx.closePath();
}
           //Função para pegar posição do mouse
          function findxy(estado, e) {
if (estado == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.getBoundingClientRect().left;
currY = e.clientY - canvas.getBoundingClientRect().top;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = cor;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}//fecha if estado == down
if (estado == 'up' || estado == "out") {
flag = false;
}
if(estado == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.getBoundingClientRect().left;
currY = e.clientY - canvas.getBoundingClientRect().top;
draw();
}
}//if estado == move
          }//fecha função findxy
//função para pegar a posição do dedo em tela touchscreen
var X_ant = 0, Y_ant = 0, X_atual = 0, Y_atual = 0, estaDesenhando = false;
function drawDedo() {
ctx.beginPath();
ctx.moveTo(X_ant, Y_ant);
ctx.lineTo(X_atual, Y_atual);
ctx.strokeStyle = cor;
ctx.lineWidth = espessura;
ctx.stroke();
ctx.closePath();
}
function findFingerXY(estado, e){
if(estado == 'inicio') {console.log("INICIO");
X_ant = X_atual;
Y_ant = Y_atual;
X_atual = e.touches[0].clientX - canvas.getBoundingClientRect().left;
Y_atual = e.touches[0].clientY - canvas.getBoundingClientRect().top;
ctx.beginPath();
ctx.fillStyle = cor;
ctx.fillRect(X_atual, Y_atual, 2, 2);
ctx.closePath();
estaDesenhando = true;
}
if(estado == 'fim'){
console.log('PAROU');
estaDesenhando = false;
}
if (estado == 'arrastando'){console.log("ARRASTANDO");
e.preventDefault();
if(estaDesenhando){
X_ant = X_atual;
Y_ant = Y_atual;
X_atual = e.touches[0].clientX - canvas.getBoundingClientRect().left;
Y_atual = e.touches[0].clientY - canvas.getBoundingClientRect().top;
drawDedo();
}
}
}//fecha a função dindFingerXY
return desenharImagem;
}//Fecha a função pintarTela