bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started refactoring rendering with paper.js

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-06-02 17:59:30 +02:00
parent b72b488b8a
commit 46439c51aa
5 changed files with 1872 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1860
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -12,9 +12,11 @@
"@material-design-icons/svg": "^0.14.2",
"@mdi/font": "^7.1.96",
"@tweenjs/tween.js": "^19.0.0",
"fabric": "^6.0.0-beta7",
"granim": "^2.0.0",
"matter-attractors": "^0.1.6",
"matter-js": "^0.19.0",
"paper": "^0.12.17",
"pinia": "^2.0.21",
"poly-decomp": "^0.3.0",
"vue": "^3.2.38",

98
src/components/ConcernementMapItem.vue
View File

@@ -23,6 +23,8 @@ import MatterAttractors from "matter-attractors";
// Matter.use(MatterAttractors);
// import polydecomp from "poly-decomp";
import paper from 'paper';
// import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
import Tween from "@tweenjs/tween.js";
@@ -47,12 +49,15 @@ export default {
time: 0,
salientPoints: [],
scale: 1,
prev_scale: 1,
opacity: 0,
tween: null,
body: null,
body_parts: [],
constraint: null,
isHover: false
isHover: false,
//
paper_objects: {}
}
},
props: ['concernement', 'opened'],
@@ -219,11 +224,14 @@ export default {
// record canvas and ctx for rendering (drawing)
this.canvas = this.canvasMap.canvas
this.ctx = this.canvasMap.ctx
// this.paper = this.canvasMap.paper
// define init position of the item
this.pos = this.getRandomPos();
//
this.initMatterBody()
//
this.initPaperObjects()
},
getRandomPos(){
let pad = 200;
@@ -386,6 +394,38 @@ export default {
}
}
},
initPaperObjects(){
this.paper_objects = new paper.Group({
pivot: new paper.Point(this.pos)
});
this.paper_objects.addChild(this.setPaperContour());
},
setPaperContour(){
// this.paper_objects.contours = new paper.Path.Circle({
// center: [this.pos.x, this.pos.y],
// radius: this.ray,
// fillColor: 'red'
// });
let gap = 1;//1.15;
let segments = [
[this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap]
];
for (let j = 1; j < this.salientPoints.length; j++) {
segments.push([this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap])
}
segments.push([this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap])
return new paper.Path({
name: 'contours',
segments: segments,
strokeColor: '#000',
strokeWidth: 1,
fillColor: 'rgba(255,255,255,0.8)',
pivot: new paper.Point(this.pos)
})
},
openClose(open) {
// console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
if (this.tween) {
@@ -404,9 +444,13 @@ export default {
// https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
// revert to the original size (by reverting the previous scale)
Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
this.paper_objects.scale(1 / this.scale);
// then scale again to new scale
Matter.Body.scale(this.body, obj.s, obj.s)
this.paper_objects.scale(obj.s);
// record new scale
this.prev_scale = this.scale;
this.scale = obj.s;
this.opacity = obj.o;
@@ -422,6 +466,7 @@ export default {
length: 0
});
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
this.prev_scale = this.scale;
});
// recreate the matter engine event to get it a the end of the events stack
Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
@@ -437,11 +482,18 @@ export default {
// https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
// revert to the original size (by reverting the previous scale)
Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
this.paper_objects.scale(1 / this.scale);
// then scale again to new scale
Matter.Body.scale(this.body, obj.s, obj.s)
this.paper_objects.scale(obj.s);
// record new scale
this.prev_scale = this.scale;
this.scale = obj.s;
this.opacity = obj.o;
})
.onComplete((obj) => {
this.prev_scale = this.scale = 1;
});
}
this.tween.easing(Tween.Easing.Quadratic.InOut).start();
@@ -506,6 +558,19 @@ export default {
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
}
this.paper_objects.position = this.pos;
// contours
if (!this.isFocused()){
this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)";
}else{
this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
if (this.isHover) {
this.paper_objects.children['contours'].strokeColor = "#01ffe2";
}else{
this.paper_objects.children['contours'].strokeColor = "#000";
}
}
this.draw()
},
draw() {
@@ -533,8 +598,10 @@ export default {
// contours
if (!this.opened
|| (this.opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
this.drawContour();
}
this.paper_objects.children['contours'].visible = true;
} else {
this.paper_objects.children['contours'].visible = false;
}
// map mode puissance d'agir
if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
@@ -951,29 +1018,6 @@ export default {
},
drawContour(){
if (this.salientPoints.length > 3) {
var fillStyle;
let strokeStyle = "#000";
if (!this.isFocused()){
fillStyle = "rgba(255,255,255,0.3)";
}else{
fillStyle = "rgba(255,255,255,0.8)"
if (this.isHover) {
strokeStyle = "#01ffe2";
}
}
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = strokeStyle;
this.ctx.fillStyle = fillStyle;
let gap = 1;//1.15;
this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap)
for (let j = 1; j < this.salientPoints.length; j++) {
this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap)
}
this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap)
this.ctx.fill();
this.ctx.stroke();
// // test draw contour from body part
// for (let i = 0; i < this.body.parts.length; i++) {
// if (this.body.parts[i].item_type === 'concernement-contours'){
@@ -1004,7 +1048,7 @@ export default {
// // }
// }
// }
//
}
},
isFocused(){

9
src/components/MapConcernements.vue
View File

@@ -26,6 +26,7 @@ import Matter from "matter-js";
import MatterAttractors from "matter-attractors";
Matter.use(MatterAttractors);
import paper from 'paper';
import { mapState, mapActions } from 'pinia'
import { ConcernementsStore } from '@/stores/concernements'
@@ -38,7 +39,7 @@ export default {
return {
canvasMap: {
canvas: null,
ctx: null,
ctx: null
},
animateEvent: new Event('animate'),
granim: null,
@@ -85,6 +86,10 @@ export default {
let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
paper.setup(this.canvasMap.canvas);
// console.log('this.canvasMap.paper', this.canvasMap.paper);
// MATTER
let wall_w = 100;
@@ -113,7 +118,7 @@ export default {
...mapActions(ConcernementsStore,['resetConcernementOpened']),
...mapActions(CommonStore,['setHoverElmt']),
animate () {
this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
// this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
// this.canvasMap.canvas.dispatchEvent(this.animateEvent)
Matter.Engine.update(this.engine, 1);
// this.checkMouseHover();

3
src/main.js
View File

@@ -8,9 +8,6 @@ import '@csstools/normalize.css';
import '@mdi/font/css/materialdesignicons.css'
import './assets/main.scss'
// import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel'
// import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'
// var decomp = require('poly-decomp');
// window.decomp = decomp;