started refactoring rendering with paper.js
This commit is contained in:
parent
b72b488b8a
commit
46439c51aa
1860
package-lock.json
generated
1860
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
@ -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(){
|
||||
|
@ -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();
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user