several canvases

瀏覽次數：41 次

跳到第一則未讀訊息

Mark Scheel

未讀,

2022年4月10日上午9:42:592022/4/10

收件者：Paper.js

Hello, i am trying to solve the following problem,

i want to have several canvases on one page. Each one has its own data.

I want to store the data and feed it back into the canvas when the site reloads.

This is done in SvelteJS , so the canvas is inside a component. I understand that this has something to do with Scope. But I can t really find the solution.

Below is the Code of my page. When i try to load the JSON data from the second canvas back into the second canvas it seems to be merged into the first canvas.

any help appreciated

cheers mark

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no" >
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<script src="reloadr.js"></script>
<script type="text/javascript" src="paperjs/paper-full.js" ></script>

<script type="text/javascript">
var ausgew_obj;
var erg_json=22;
var mypapers = [];
var zeichnen=true;
var mypapers = [];
var mp_inhalt=[
{inhalt:""},
{inhalt:""}
]
window.onload=function()
{
paper.install(window);
Reloadr.go({
client: [
'm-js.js',
'index.html'
],
server: [
],
path: '/include/reloadr.php',
frequency: 1000
});

initPaper(0, document.getElementById('myCanvas'));
initPaper(1, document.getElementById('myCanvas2'));

function initPaper(id, canvasElement) {
var nr = id;

mypapers[id] = new paper.PaperScope();
paper = mypapers[id];
paper.setup(canvasElement);

var tool = new paper.Tool();
//var path;

var path = new Path.Circle({
center: [80, 50],
radius: 35,
fillColor: 'red'
});

tool.onMouseDown=function(event)
{
if(zeichnen==true)
{
path = new Path();
path.strokeColor="black";
// path.add(event.point);
}

}
tool.onMouseDrag=function(event)
{

path.add(event.point);

}

var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5,
};
tool.onMouseUp=function(event)
{

path.simplify(10);
erg=path._segments;
if(path._segments.length==0)
{console.log("leerer Path");
path.remove();
}
let erg_ges = JSON.stringify(mypapers[nr].project.exportJSON());
mp_inhalt[nr]=erg_ges;

console.log(erg_ges);
/*
if(zeichnen==true)
{

}
else
{
// console.log(mypapers[id].project.exportJSON());
// console.log('******************************************');
var hitResult = mypapers[id].project.hitTestAll(event.point, hitOptions);
// console.log('hitResult (' + hitResult.length + ')' , hitResult);
if (hitResult.length>0) {
console.log("hit result aktion");
// do something...
//hitResult[0].item.remove();
console.log(paper);
paper.project.clear();
}

}
//var json = mypapers[id].exportJSON();
*/
}
tool.onDoubleClick=function()
{
console.log("doppelclick");
}
}

}
function in1(inp)
{
console.log(inp);
console.log(mypapers[inp]);
let akt_p = mypapers[inp];
akt_p.project.importJSON(JSON.parse(mp_inhalt[inp]));
}

</script>

<body style="width:100%;background-color:transparent;margin:0px;">
<button onclick="zeichnen=true">+</button>
<button onclick="zeichnen=false">-</button>
<button onclick="console.log(mp_inhalt[0]);">0</button>
<button onclick="console.log(mp_inhalt[1]);">1</button>
<button onclick="in1(0);">..1</button>
<button onclick="in1(1);">..2</button>

<div style="border:1px solid black;width:200px;height:120px;">
<canvas id="myCanvas" ></canvas>
</div>

<div style="border:1px solid black;width:200px;height:120px;">
<canvas id="myCanvas2" ></canvas>
</div>

</body>

</html>

回覆所有人

回覆作者

轉寄

訊息已遭刪除

0 則新訊息