paper bg for doleance done!
This commit is contained in:
parent
6afc3f945f
commit
3b1565c82f
@ -709,8 +709,6 @@ export default {
|
||||
return g;
|
||||
},
|
||||
setPaperDoleanceBG(){
|
||||
let children = [];
|
||||
|
||||
var r = this.ray * this.scale * 0.8; // ray
|
||||
var dr = r/2; // demi ray
|
||||
var d = r*2; // diameter
|
||||
@ -739,7 +737,7 @@ export default {
|
||||
|
||||
let style = {
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 1
|
||||
strokeWidth: 2
|
||||
}
|
||||
|
||||
let legende_style = {
|
||||
@ -749,207 +747,353 @@ export default {
|
||||
|
||||
let fontsize = 2.1;
|
||||
|
||||
// arcs exterieur
|
||||
// haut gauche
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - r, this.pos.y - pcr],
|
||||
through: [this.pos.x - m, this.pos.y - m],
|
||||
to: [this.pos.x - pcr, this.pos.y - r],
|
||||
style: style
|
||||
}));
|
||||
// haut droite
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + pcr, this.pos.y - r],
|
||||
through: [this.pos.x + m, this.pos.y - m],
|
||||
to: [this.pos.x + r, this.pos.y - pcr],
|
||||
style: style
|
||||
}));
|
||||
// bas droite
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + r, this.pos.y + pcr],
|
||||
through: [this.pos.x + m, this.pos.y + m],
|
||||
to: [this.pos.x + pcr, this.pos.y + r],
|
||||
style: style
|
||||
}));
|
||||
// bas gauche
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - pcr, this.pos.y + r],
|
||||
through: [this.pos.x - m, this.pos.y + m],
|
||||
to: [this.pos.x - r, this.pos.y + pcr],
|
||||
style: style
|
||||
}));
|
||||
let children = [
|
||||
// ARCS EXTERIEURS
|
||||
// haut gauche
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x - r, this.pos.y - pcr],
|
||||
through: [this.pos.x - m, this.pos.y - m],
|
||||
to: [this.pos.x - pcr, this.pos.y - r],
|
||||
style: style
|
||||
}),
|
||||
// haut droite
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x + pcr, this.pos.y - r],
|
||||
through: [this.pos.x + m, this.pos.y - m],
|
||||
to: [this.pos.x + r, this.pos.y - pcr],
|
||||
style: style
|
||||
}),
|
||||
// bas droite
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x + r, this.pos.y + pcr],
|
||||
through: [this.pos.x + m, this.pos.y + m],
|
||||
to: [this.pos.x + pcr, this.pos.y + r],
|
||||
style: style
|
||||
}),
|
||||
// bas gauche
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x - pcr, this.pos.y + r],
|
||||
through: [this.pos.x - m, this.pos.y + m],
|
||||
to: [this.pos.x - r, this.pos.y + pcr],
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// cercle interieur
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y],
|
||||
radius: dr,
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// petit cercles
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y -r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y + r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x + r, this.pos.y],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x -r, this.pos.y],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// AXES
|
||||
// vertical haut
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y - r + pcr],
|
||||
to: [this.pos.x , this.pos.y - dr],
|
||||
style: style
|
||||
}),
|
||||
// vertical bas
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y + r - pcr],
|
||||
to: [this.pos.x , this.pos.y + dr],
|
||||
style: style
|
||||
}),
|
||||
// horizontal gauche
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x - r + pcr, this.pos.y],
|
||||
to: [this.pos.x - dr, this.pos.y],
|
||||
style: style
|
||||
}),
|
||||
// horizontal droite
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x + r - pcr, this.pos.y],
|
||||
to: [this.pos.x + dr, this.pos.y],
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// DIAGONALES
|
||||
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
|
||||
}),
|
||||
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({
|
||||
segments: [
|
||||
[this.pos.x - 2, this.pos.y - dr*1.5 - 2],
|
||||
[this.pos.x, this.pos.y - dr*1.5],
|
||||
[this.pos.x - 2, this.pos.y - dr*1.5 + 2]
|
||||
],
|
||||
style: style
|
||||
}),
|
||||
// bas
|
||||
new paper.Path({
|
||||
segments: [
|
||||
[this.pos.x + 2, this.pos.y + dr*1.5 - 2],
|
||||
[this.pos.x, this.pos.y + dr*1.5],
|
||||
[this.pos.x + 2, this.pos.y + dr*1.5 + 2]
|
||||
],
|
||||
style: style
|
||||
}),
|
||||
// gauche
|
||||
new paper.Path({
|
||||
segments: [
|
||||
[this.pos.x - dr*1.5 - 2, this.pos.y + 2],
|
||||
[this.pos.x - dr*1.5, this.pos.y],
|
||||
[this.pos.x - dr*1.5 + 2, this.pos.y + 2]
|
||||
],
|
||||
style: style
|
||||
}),
|
||||
// droite
|
||||
new paper.Path({
|
||||
segments: [
|
||||
[this.pos.x + dr*1.5 - 2, this.pos.y - 2],
|
||||
[this.pos.x + dr*1.5, this.pos.y],
|
||||
[this.pos.x + dr*1.5 + 2, this.pos.y - 2]
|
||||
],
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// LEGENDES
|
||||
//
|
||||
// arc bas gauche 1
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x - pcr, this.pos.y + lar],
|
||||
through: [this.pos.x - p, this.pos.y + o],
|
||||
to: [this.pos.x - q + pcr/2, this.pos.y + q + pcr/2],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x - p, this.pos.y + o],
|
||||
to: [this.pos.x - p_t, this.pos.y + o_t],
|
||||
style: legende_style
|
||||
}),
|
||||
//text
|
||||
new paper.PointText({
|
||||
point: [this.pos.x - p_t - 1, this.pos.y + o_t],
|
||||
content: "Enquête menée\nsur le terrain de vie",
|
||||
fontSize: fontsize,
|
||||
justification: 'right'
|
||||
}),
|
||||
// arc bas gauche 2
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x - q - pcr/2, this.pos.y + q - pcr/2],
|
||||
through: [this.pos.x - o, this.pos.y + p],
|
||||
to: [this.pos.x - lar, this.pos.y + pcr],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x - o, this.pos.y + p],
|
||||
to: [this.pos.x - o_t, this.pos.y + p_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [this.pos.x - o_t - 1, this.pos.y + p_t],
|
||||
content: "Construction de groupes d'intérets\navec qui composer la doléance",
|
||||
fontSize: fontsize,
|
||||
justification: 'right'
|
||||
}),
|
||||
// arc haut gauche
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x - lar, this.pos.y - pcr],
|
||||
through: [this.pos.x - q, this.pos.y - q],
|
||||
to: [this.pos.x - pcr, this.pos.y - lar],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x - q, this.pos.y - q],
|
||||
to: [this.pos.x - q_t, this.pos.y - q_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [this.pos.x - q_t - 1, this.pos.y - q_t],
|
||||
content: "Réception et traitement\nde la doléance",
|
||||
fontSize: fontsize,
|
||||
justification: 'right'
|
||||
}),
|
||||
// arc haut droite
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x + pcr, this.pos.y - lar],
|
||||
through: [this.pos.x + q, this.pos.y - q],
|
||||
to: [this.pos.x + lar, this.pos.y - pcr],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x + q, this.pos.y - q],
|
||||
to: [this.pos.x + q_t, this.pos.y - q_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [this.pos.x + q_t + 1, this.pos.y - q_t],
|
||||
content: "Mise-en-œuvre\nde la décision",
|
||||
fontSize: fontsize,
|
||||
justification: 'left'
|
||||
}),
|
||||
// arc bas droite 1
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x + lar, this.pos.y + pcr],
|
||||
through: [this.pos.x + o, this.pos.y + p],
|
||||
to: [this.pos.x + q + pcr/2, this.pos.y + q - pcr/2],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x + o, this.pos.y + p],
|
||||
to: [this.pos.x + o_t, this.pos.y + p_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [this.pos.x + o_t + 1, this.pos.y + p_t],
|
||||
content: "Réception et application\nde la décision",
|
||||
fontSize: fontsize,
|
||||
justification: 'left'
|
||||
}),
|
||||
// arc bas droite 2
|
||||
new paper.Path.Arc({
|
||||
from: [this.pos.x + q - pcr/2, this.pos.y + q + pcr/2],
|
||||
through: [this.pos.x + p, this.pos.y + o],
|
||||
to: [this.pos.x + pcr, this.pos.y + lar],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x + p, this.pos.y + o],
|
||||
to: [this.pos.x + p_t, this.pos.y + o_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [this.pos.x + p_t + 1, this.pos.y + o_t],
|
||||
content: "Réussite / échec / reprise\ndu cercle politique",
|
||||
fontSize: fontsize,
|
||||
justification: 'left'
|
||||
}),
|
||||
//
|
||||
// legendes petits cercles
|
||||
// haut
|
||||
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 - 9],
|
||||
content: "Décision",
|
||||
fontSize: fontsize,
|
||||
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'
|
||||
}),
|
||||
// droite
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x + r, this.pos.y],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#000'
|
||||
}
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x + r, this.pos.y],
|
||||
to: [this.pos.x + r + 8, this.pos.y],
|
||||
style: legende_style
|
||||
}),
|
||||
new paper.PointText({
|
||||
point: [this.pos.x + r + 9, this.pos.y - 0.5],
|
||||
content: "Adresse de la décision\nà appliquer",
|
||||
fontSize: fontsize,
|
||||
justification: 'left'
|
||||
}),
|
||||
// gauche
|
||||
new paper.Path.Circle({
|
||||
center: [this.pos.x -r, this.pos.y],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#000'
|
||||
}
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [this.pos.x - r, this.pos.y],
|
||||
to: [this.pos.x - r - 8, this.pos.y],
|
||||
style: legende_style
|
||||
}),
|
||||
new paper.PointText({
|
||||
point: [this.pos.x - r - 9, this.pos.y + 0.4],
|
||||
content: "Adresse de la doléance",
|
||||
fontSize: fontsize,
|
||||
justification: 'right'
|
||||
}),
|
||||
];
|
||||
|
||||
// legendes
|
||||
// ARC bas gauche 1
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - pcr, this.pos.y + lar],
|
||||
through: [this.pos.x - p, this.pos.y + o],
|
||||
to: [this.pos.x - q + pcr/2, this.pos.y + q + pcr/2],
|
||||
style: legende_style
|
||||
}));
|
||||
children.push(new paper.PointText({
|
||||
point: [this.pos.x - p_t, this.pos.y + o_t],
|
||||
content: "Enquête menée\nsur le terrain de vie",
|
||||
fontSize: fontsize,
|
||||
justification: 'right'
|
||||
}));
|
||||
|
||||
// ARC bas gauche 2
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - q - pcr/2, this.pos.y + q - pcr/2],
|
||||
through: [this.pos.x - o, this.pos.y + p],
|
||||
to: [this.pos.x - lar, this.pos.y + pcr],
|
||||
style: legende_style
|
||||
}));
|
||||
children.push(new paper.PointText({
|
||||
point: [this.pos.x - o_t, this.pos.y + p_t],
|
||||
content: "Construction de groupes d'intérets\navec qui composer la doléance",
|
||||
fontSize: fontsize,
|
||||
justification: 'right'
|
||||
}));
|
||||
|
||||
// ARC haut gauche
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - lar, this.pos.y - pcr],
|
||||
through: [this.pos.x - q, this.pos.y - q],
|
||||
to: [this.pos.x - pcr, this.pos.y - lar],
|
||||
style: legende_style
|
||||
}));
|
||||
children.push(new paper.PointText({
|
||||
point: [this.pos.x - q_t, this.pos.y - q_t],
|
||||
content: "Réception et traitement\nde la doléance",
|
||||
fontSize: fontsize,
|
||||
justification: 'right'
|
||||
}));
|
||||
|
||||
// ARC haut droite
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + pcr, this.pos.y - lar],
|
||||
through: [this.pos.x + q, this.pos.y - q],
|
||||
to: [this.pos.x + lar, this.pos.y - pcr],
|
||||
style: legende_style
|
||||
}));
|
||||
children.push(new paper.PointText({
|
||||
point: [this.pos.x + q_t, this.pos.y - q_t],
|
||||
content: "Mise-en-œuvre\nde la décision",
|
||||
fontSize: fontsize,
|
||||
justification: 'left'
|
||||
}));
|
||||
|
||||
// ARC bas droite 1
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + lar, this.pos.y + pcr],
|
||||
through: [this.pos.x + o, this.pos.y + p],
|
||||
to: [this.pos.x + q + pcr/2, this.pos.y + q - pcr/2],
|
||||
style: legende_style
|
||||
}));
|
||||
children.push(new paper.PointText({
|
||||
point: [this.pos.x + o_t, this.pos.y + p_t],
|
||||
content: "Réception et application\nde la décision",
|
||||
fontSize: fontsize,
|
||||
justification: 'left'
|
||||
}));
|
||||
|
||||
// ARC bas droite 2
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + q - pcr/2, this.pos.y + q + pcr/2],
|
||||
through: [this.pos.x + p, this.pos.y + o],
|
||||
to: [this.pos.x + pcr, this.pos.y + lar],
|
||||
style: legende_style
|
||||
}));
|
||||
children.push(new paper.PointText({
|
||||
point: [this.pos.x + p_t, this.pos.y + o_t],
|
||||
content: "Réussite / échec / reprise\ndu cercle politique",
|
||||
fontSize: fontsize,
|
||||
justification: 'left'
|
||||
}));
|
||||
|
||||
|
||||
// cercle interieur
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y],
|
||||
radius: dr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
// petit cercles
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y -r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y + r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x + r, this.pos.y],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x -r, this.pos.y],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
// axes
|
||||
// vertical
|
||||
// haut
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y - r + pcr],
|
||||
to: [this.pos.x , this.pos.y - dr],
|
||||
style: style
|
||||
}));
|
||||
// bas
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y + r - pcr],
|
||||
to: [this.pos.x , this.pos.y + dr],
|
||||
style: style
|
||||
}));
|
||||
|
||||
// horizontal
|
||||
// gauche
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - r + pcr, this.pos.y],
|
||||
to: [this.pos.x - dr, this.pos.y],
|
||||
style: style
|
||||
}));
|
||||
// droite
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + r - pcr, this.pos.y],
|
||||
to: [this.pos.x + dr, this.pos.y],
|
||||
style: style
|
||||
}));
|
||||
|
||||
// diagonales
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y + m],
|
||||
to: [this.pos.x + n, this.pos.y + n],
|
||||
style: style
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y + m],
|
||||
to: [this.pos.x - n, this.pos.y + n],
|
||||
style: style
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y - m],
|
||||
to: [this.pos.x + n, this.pos.y - n],
|
||||
style: style
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y - m],
|
||||
to: [this.pos.x - n, this.pos.y - n],
|
||||
style: style
|
||||
}));
|
||||
|
||||
return new paper.Group({
|
||||
children: children,
|
||||
@ -1177,7 +1321,7 @@ export default {
|
||||
.to({
|
||||
s: 7,
|
||||
x: (this.canvas.width - 450) / 2,
|
||||
y: this.canvas.height / 2 + 50,
|
||||
y: this.canvas.height / 2 + 30,
|
||||
o: 0.8
|
||||
}, 800)
|
||||
.onUpdate((obj) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user