azeirah / infinite-canvas Goto Github PK
View Code? Open in Web Editor NEWAn infinitely expanding chunked canvas buffer for your infinite drawing needs!
An infinitely expanding chunked canvas buffer for your infinite drawing needs!
Hi,
in my project I create filled rectagles with the mouse and store them into an objectArray. If I create a new rec I clear the screen while onmousemove and recreate the objects by looping through my array.
But in combination with your script I have the problem, that each time, when I move the canvas and then draw a new rect, everthing jumps back to it's origninal position. Any idea how to handle that?
thanks in advance
Frannk
const canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
setCanvasSize();
// Initialization
var inf_ctx = infiniteCanvas.initialize(ctx);
inf_ctx.updateChunks();
window.addEventListener('resize', () => {
setCanvasSize();
drawUpdate();
})
let color = '#e28743'
ctx.strokeStyle = color;
ctx.lineWidth=1;
// calculate where the canvas is on the window
// (used to help calculate mouseX/mouseY)
var offsetX=canvas.offsetLeft;
var offsetY=canvas.offsetTop;
var scrollX=canvas.scrollLeft;
var scrollY=canvas.scrollTop;
// this flage is true when the user is dragging the mouse
var isDown=false;
// these vars will hold the starting mouse position
var startX;
var startY;
let objectArray = [];
let startDrawing = false;
var width = 0;
var height = 0;
var dx = 0;
var dy = 0;
function setCanvasSize()
{
canvas.width= window.innerWidth;
canvas.height = window.innerHeight;
}
function createNotepaper(x,y,width,height, color) {
this.color = color;
this.startX = x;
this.startY = y;
this.width = width;
this.height = height;
this.draw = () => {
ctx.fillStyle = '#00000020';
ctx.beginPath();
ctx.filter = 'blur(3px)';
ctx.fillRect(this.startX+4,this.startY+4,this.width,this.height);
ctx.filter = 'blur(0px)';
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.fillRect(this.startX,this.startY,this.width,this.height);
// Text
ctx.font = "12px Verdana";
ctx.fillStyle = '#fff';
ctx.textAlign = "left";
ctx.fillText("GovBoard Demo", this.startX+5, this.startY+17, this.width-10);
ctx.save();
}
}
function changeColor(e)
{
color = window.getComputedStyle(e).getPropertyValue('background-color');
ctx.strokeStyle = color;
isDown=false;
startDrawing= false;
}
function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
// save the starting x/y of the rectangle
startX=parseInt(e.clientX-canvas.offsetLeft);
startY=parseInt(e.clientY-canvas.offsetTop);
// set a flag indicating the drag has begun
isDown=true;
}
function handleMouseUp(e){
e.preventDefault();
e.stopPropagation();
// the drag is over, clear the dragging flag
isDown=false;
if(startDrawing)
{
newPaperNote();
}
inf_ctx.updateChunks();
}
function handleMouseOut(e){
e.preventDefault();
e.stopPropagation();
// the drag is over, clear the dragging flag
isDown=false;
}
function drawUpdate()
{
for(var i=0; i < objectArray.length; i++)
{
objectArray[i].draw();
}
}
function moveTo(x,y)
{
ctx.clearRect(0,0,canvas.width,canvas.height);
dx = x;
dy = y;
inf_ctx.moveBy(x, y);
}
function newPaperNote()
{
const notepaper = new createNotepaper(startX,startY,width,height,color);
ctx.clearRect(0,0,canvas.width,canvas.height);
objectArray.push(notepaper);
drawUpdate();
startDrawing = false;
}
function handleMouseMove(e){
e.preventDefault();
e.stopPropagation();
// if we're not dragging, just return
if(isDown)
{
startDrawing = true;
// get the current mouse position
mouseX=parseInt(e.offsetX);
mouseY=parseInt(e.offsetY);
// calculate the rectangle width/height based
// on starting vs current mouse position
width=mouseX-startX;
height=mouseY-startY;
ctx.clearRect(0,0,canvas.width,canvas.height);
// inf_ctx.updateChunks();
drawUpdate();
ctx.beginPath()
ctx.fillStyle = '#ff0000';
ctx.rect(startX,startY,width,height);
ctx.stroke()
}
if(!isDown && startDrawing)
{
newPaperNote();
}
}
canvas.addEventListener("mousedown",handleMouseDown);
canvas.addEventListener("mouseup",handleMouseUp);
canvas.addEventListener("mousemove",handleMouseMove);
canvas.addEventListener("mouseout", handleMouseOut);
When canvas.height < configuration.chunkHeight, updating shifts down the contents of the buffer a little bit. This is not the case with the horizontal axis, only with the vertical one.
I assume this has something to do with putlocation.y, where I subtract configuration.chunkHeight - height of buffer. It then gets pushed down too much!
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.