made the first camenbert of doleance
This commit is contained in:
parent
894b0219c5
commit
4f82e8021d
@ -727,7 +727,6 @@ export default {
|
||||
setPaperDoleanceBG(){
|
||||
var r = this.ray * this.scale * 0.8; // ray
|
||||
var dr = r/2; // demi ray
|
||||
var d = r*2; // diameter
|
||||
var pcr = 2*this.scale; // petits cercle rayon
|
||||
|
||||
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
|
||||
@ -735,9 +734,8 @@ export default {
|
||||
// radians = degrees * (pi/180)
|
||||
// degrees = radians * (180/pi)
|
||||
// Points for 45° axes
|
||||
let m,n;
|
||||
m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon
|
||||
n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
|
||||
let m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon
|
||||
let n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
|
||||
// console.log('m', m);
|
||||
|
||||
// points for legende arcs
|
||||
@ -753,7 +751,7 @@ export default {
|
||||
|
||||
let style = {
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 2
|
||||
strokeWidth: 1
|
||||
}
|
||||
|
||||
let legende_style = {
|
||||
@ -850,26 +848,30 @@ export default {
|
||||
}),
|
||||
//
|
||||
// DIAGONALES
|
||||
// bas droite
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y + m],
|
||||
to: [this.pos.x + n, this.pos.y + n],
|
||||
style: style
|
||||
}),
|
||||
// bas gauche
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y + m],
|
||||
to: [this.pos.x - n, this.pos.y + n],
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y - m],
|
||||
to: [this.pos.x + n, this.pos.y - n],
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y - m],
|
||||
to: [this.pos.x - n, this.pos.y - n],
|
||||
style: style
|
||||
}),
|
||||
// // haut droite
|
||||
// new paper.Path.Line({
|
||||
// from: [this.pos.x + m, this.pos.y - m],
|
||||
// to: [this.pos.x + n, this.pos.y - n],
|
||||
// style: style
|
||||
// }),
|
||||
// // haut gauche
|
||||
// new paper.Path.Line({
|
||||
// from: [this.pos.x - m, this.pos.y - m],
|
||||
// to: [this.pos.x - n, this.pos.y - n],
|
||||
// style: style
|
||||
// }),
|
||||
// fleches
|
||||
// haut
|
||||
new paper.Path({
|
||||
@ -1052,24 +1054,24 @@ export default {
|
||||
justification: 'center'
|
||||
}),
|
||||
// bas
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y + r],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#000'
|
||||
}
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y + r],
|
||||
to: [this.pos.x, this.pos.y + r + 8],
|
||||
style: legende_style
|
||||
}),
|
||||
new paper.PointText({
|
||||
point: [this.pos.x, this.pos.y + r + 10],
|
||||
content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
|
||||
fontSize: fontsize,
|
||||
justification: 'center'
|
||||
}),
|
||||
// new paper.Path.Circle({
|
||||
// center: [this.pos.x, this.pos.y + r],
|
||||
// radius: 0.5,
|
||||
// style: {
|
||||
// fillColor: '#000'
|
||||
// }
|
||||
// }),
|
||||
// new paper.Path.Line({
|
||||
// from: [this.pos.x, this.pos.y + r],
|
||||
// to: [this.pos.x, this.pos.y + r + 8],
|
||||
// style: legende_style
|
||||
// }),
|
||||
// new paper.PointText({
|
||||
// point: [this.pos.x, this.pos.y + r + 10],
|
||||
// content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
|
||||
// fontSize: fontsize,
|
||||
// justification: 'center'
|
||||
// }),
|
||||
// droite
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x + r, this.pos.y],
|
||||
@ -1198,7 +1200,144 @@ export default {
|
||||
});
|
||||
},
|
||||
setPaperDoleanceSteps(){
|
||||
let g = new paper.Group({
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'doleance steps'
|
||||
});
|
||||
let doleance = this.concernement.doleances[0];
|
||||
let all_fields = [
|
||||
[
|
||||
'leprobleme',
|
||||
'lenquete',
|
||||
{
|
||||
fieldname: 'groupesinterets',
|
||||
fields: [
|
||||
'groupe_interets',
|
||||
'accorder_interets',
|
||||
'formuler',
|
||||
]
|
||||
}
|
||||
],
|
||||
[
|
||||
'entite_addresse_doleance',
|
||||
'comment_ennonce_doleance',
|
||||
'aqui_addresse_doleance',
|
||||
{
|
||||
fieldname: 'groupesinterets',
|
||||
fields: [
|
||||
'entite_adressee',
|
||||
'doleance_formulee',
|
||||
'traite_doleance',
|
||||
'entite_recoit_doleance',
|
||||
]
|
||||
}
|
||||
],
|
||||
[
|
||||
'entites_decisionnaires',
|
||||
'decision_formule',
|
||||
{
|
||||
fieldname: 'mise_en_oeuvre_decision',
|
||||
fields: [
|
||||
'entite_adresse_decision',
|
||||
'formule_decision',
|
||||
'entite_metenoeuvre_decisio',
|
||||
]
|
||||
}
|
||||
],
|
||||
[
|
||||
'entite_adresse_application',
|
||||
'aqui_adresse_decision',
|
||||
'comment_formule_decision',
|
||||
{
|
||||
fieldname: 'receptions_et_applications',
|
||||
fields: [
|
||||
'applique_decision',
|
||||
'formule_decision_applic',
|
||||
'entite_recoit_decision',
|
||||
]
|
||||
},
|
||||
'probleme_initial_resolu',
|
||||
'oui_nouvelle_situation',
|
||||
'non_adresse_doleance',
|
||||
]
|
||||
];
|
||||
|
||||
var r = this.ray * this.scale * 0.8; // ray
|
||||
var dr = r/2; // demi ray
|
||||
var pcr = 2*this.scale; // petits cercle rayon
|
||||
|
||||
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
|
||||
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
|
||||
// radians = degrees * (pi/180)
|
||||
// degrees = radians * (180/pi)
|
||||
// Points for 45° axes
|
||||
let m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon
|
||||
let n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
|
||||
|
||||
let o = Math.cos(22.5*(Math.PI/180)) * r; // x @ 22.5° for rayon
|
||||
let p = Math.sin(22.5*(Math.PI/180)) * r; // y @ 22.5° for rayon
|
||||
let o_d = Math.cos(22.5*(Math.PI/180)) * r/2; // x @ 22.5° for demi rayon
|
||||
let p_d = Math.sin(22.5*(Math.PI/180)) * r/2; // y @ 22.5° for demi rayon
|
||||
|
||||
let fontsize = 2.1;
|
||||
|
||||
//
|
||||
// PREMIER QUART
|
||||
//
|
||||
// #1 le problème
|
||||
//
|
||||
g.addChild(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y + r],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#fff'
|
||||
}
|
||||
}))
|
||||
g.addChild(new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y + r],
|
||||
to: [this.pos.x, this.pos.y + r + 8],
|
||||
strokeColor: '#fff'
|
||||
}))
|
||||
g.addChild(new paper.PointText({
|
||||
point: [this.pos.x, this.pos.y + r + 10],
|
||||
content: doleance['leprobleme'],
|
||||
fontSize: fontsize,
|
||||
fillColor: '#fff',
|
||||
justification: 'center'
|
||||
}))
|
||||
|
||||
//
|
||||
// #2 l'enquete
|
||||
//
|
||||
let enquete = new paper.Group({
|
||||
name: 'enquete'
|
||||
});
|
||||
// camenbert
|
||||
let cam = new paper.Path({
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 2,
|
||||
fillColor: "rgba(255, 255, 255, 0.4)"
|
||||
});
|
||||
cam.add({x: this.pos.x , y: this.pos.y + dr});
|
||||
cam.lineTo({x: this.pos.x, y: this.pos.y + r});
|
||||
cam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
|
||||
cam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
|
||||
cam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
|
||||
enquete.addChild(cam)
|
||||
// texte
|
||||
enquete.addChild(new paper.PointText({
|
||||
point: {
|
||||
x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
|
||||
y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
|
||||
},
|
||||
content: doleance['lenquete'],
|
||||
fontSize: fontsize,
|
||||
fillColor: '#fff',
|
||||
justification: 'center'
|
||||
}));
|
||||
g.addChild(enquete);
|
||||
|
||||
return g;
|
||||
},
|
||||
// PAPER EVENTS
|
||||
initPaperEvents(){
|
||||
|
||||
@ -5,22 +5,6 @@ import { computed } from 'vue'
|
||||
import MapBackground from '@components/MapBackground.vue'
|
||||
|
||||
// https://brm.io/matter-js/docs/classes/Engine.html
|
||||
// import {
|
||||
// Engine,
|
||||
// // Render,
|
||||
// // World,
|
||||
// Bodies,
|
||||
// // Body,
|
||||
// // Events,
|
||||
// Composite,
|
||||
// // Composites,
|
||||
// // Constraint,
|
||||
// // Vertices,
|
||||
// // Mouse,
|
||||
// // MouseConstraint,
|
||||
// // Query,
|
||||
// // Common
|
||||
// } from "matter-js";
|
||||
import Matter from "matter-js";
|
||||
|
||||
import MatterAttractors from "matter-attractors";
|
||||
@ -46,11 +30,10 @@ export default {
|
||||
// MATTER
|
||||
engine: null,
|
||||
world: null,
|
||||
// render: null,
|
||||
// mouse: null,
|
||||
mapPopupData: null,
|
||||
// PAPERJS
|
||||
paper: null
|
||||
paper: null,
|
||||
//
|
||||
mapPopupData: null,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@ -171,7 +154,7 @@ export default {
|
||||
<a href="#action" @click="setMapMode('action')"><span class="icon action"></span> action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span> doléancer</a>
|
||||
<a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span> cercle politique</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user