74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
var angle_arr = [];
|
|
function closest(val){
|
|
x= angle_arr.reduce(function(prev, cur) {
|
|
return Math.abs(cur.angle - val) < Math.abs(prev.angle - val) ? cur : prev;
|
|
});
|
|
return x;
|
|
}
|
|
window.onload = function() {
|
|
fetch('js/angles.json').then((response)=>response.json()).then((json)=>angle_arr=json.angles);
|
|
var input = document.getElementById('fileUpload');
|
|
input.addEventListener('change', handleFiles);
|
|
rotation.addEventListener("input", (event) => {
|
|
var closestAngle = closest(event.target.value);
|
|
console.log(closestAngle);
|
|
event.target.value = closestAngle.angle;
|
|
angle.textContent = event.target.value;
|
|
tileImg(closestAngle.angle);
|
|
})
|
|
canvas.width = 700;
|
|
canvas.height = 700;
|
|
|
|
|
|
}
|
|
var img = new Image;
|
|
function handleFiles(e) {
|
|
img.onload = tileImg;
|
|
img.src = URL.createObjectURL(e.target.files[0]);
|
|
|
|
}
|
|
|
|
function tileImg(a) {
|
|
var ctx = document.getElementById('canvas').getContext('2d');
|
|
var image = img;
|
|
// Set the angle in radians
|
|
const angleDeg = a; // Replace with your desired angle in degrees
|
|
const angle = angleDeg * Math.PI / 180;
|
|
// Create a temporary canvas
|
|
var tempCanvas = document.createElement ("canvas");
|
|
var tempCtx = tempCanvas.getContext ("2d");
|
|
|
|
// Calculate the diagonal length of the original canvas
|
|
var d = Math.sqrt (canvas.width * canvas.width + canvas.height * canvas.height);
|
|
|
|
// Set the temporary canvas dimensions to the diagonal length
|
|
tempCanvas.width = d;
|
|
tempCanvas.height = d;
|
|
|
|
// Create the pattern on the temporary context
|
|
var pattern = tempCtx.createPattern (image, "repeat");
|
|
|
|
// Set the fill style on the temporary context
|
|
tempCtx.fillStyle = pattern;
|
|
|
|
// Save the temporary context state
|
|
tempCtx.save ();
|
|
|
|
// Translate to the center of the temporary canvas
|
|
tempCtx.translate (d / 2, d / 2);
|
|
|
|
// Rotate by the angle
|
|
tempCtx.rotate (angle);
|
|
|
|
// Draw the rectangle with the pattern on the temporary context
|
|
tempCtx.fillRect (-d / 2, -d / 2, d, d);
|
|
|
|
// Restore the temporary context state
|
|
tempCtx.restore ();
|
|
|
|
// Draw the temporary canvas on the original canvas
|
|
ctx.drawImage (tempCanvas, - (d - canvas.width) / 2, - (d - canvas.height) / 2);
|
|
|
|
|
|
}
|