How to bring a group item on top of all items in Paper.js?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
In the following example, labels can't be seen at any time:
var g1 = new Group({
position: view.center,
applyMatrix: false
})
new Shape.Circle({
radius: 50,
fillColor: 'red',
parent: g1
})
new PointText({
content: 'hello world',
parent: g1
})
var g2 = new Group({
position: view.center += [10, 10],
applyMatrix: false
})
new Shape.Circle({
radius: 40,
fillColor: 'yellow',
parent: g2
})
new PointText({
content: 'hi there',
parent: g2
})
var sleep = function(ms, f){setTimeout(f, ms)}
sleep(1000, () => {
g2.position += [20, 20]
g1.children[1].fillColor = 'blue'
g1.children[1].bringToFront();
sleep(1000, () => {
g1.bringToFront()
})
})
How can we keep those texts in front of any other items in the canvas at any time?
Note: A possible solution would be getting the texts out of groups and manually positioning them. However, this will introduce huge design changes in the actual application.
paperjs
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
|
show 1 more comment
0
In the following example, labels can't be seen at any time:
var g1 = new Group({
position: view.center,
applyMatrix: false
})
new Shape.Circle({
radius: 50,
fillColor: 'red',
parent: g1
})
new PointText({
content: 'hello world',
parent: g1
})
var g2 = new Group({
position: view.center += [10, 10],
applyMatrix: false
})
new Shape.Circle({
radius: 40,
fillColor: 'yellow',
parent: g2
})
new PointText({
content: 'hi there',
parent: g2
})
var sleep = function(ms, f){setTimeout(f, ms)}
sleep(1000, () => {
g2.position += [20, 20]
g1.children[1].fillColor = 'blue'
g1.children[1].bringToFront();
sleep(1000, () => {
g1.bringToFront()
})
})
How can we keep those texts in front of any other items in the canvas at any time?
Note: A possible solution would be getting the texts out of groups and manually positioning them. However, this will introduce huge design changes in the actual application.
paperjs
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
1
I think that the workaround you are describing is the better way to do what you describe. There is no way to draw texts above circle without changing their order, this is how the library works. You can still fork the library and change its behaviour to allow doing what you want. Can you add details about your application design that prevent you from separating circles and texts (maybe there are other solutions) ?
– sasensi
Nov 22 '18 at 8:10
1
Please see: github.com/ceremcem/aecad/issues/9
– ceremcem
Nov 22 '18 at 8:29
@sasensi Within the "rehydration" process, related Paper.js items are determined by Paper.jsitem.children. If we separate the labels from the component group, it'll be a non-trivial task to find related parts within the project while resuming an aeCAD object.
– ceremcem
Nov 22 '18 at 8:42
About finding related part, maybe using item.id and item.data to create a basic relational data model could help ? E.g.circle.data.labelId = label.id.
– sasensi
Nov 22 '18 at 8:58
Relational model will solve the case. However, as this application is used for engineering purposes, data integrity is extremely important. If anything happens while moving a "group" (app hang+crash), one piece might be moved and the other might not. This will force us to introduce a transaction semantic: First mark the group of items to be moved, then move, then clear the dirty flag. If app crashes in the process, the journal will be used to recover last action.
– ceremcem
Nov 23 '18 at 11:28
|
show 1 more comment
0
0
0
In the following example, labels can't be seen at any time:
var g1 = new Group({
position: view.center,
applyMatrix: false
})
new Shape.Circle({
radius: 50,
fillColor: 'red',
parent: g1
})
new PointText({
content: 'hello world',
parent: g1
})
var g2 = new Group({
position: view.center += [10, 10],
applyMatrix: false
})
new Shape.Circle({
radius: 40,
fillColor: 'yellow',
parent: g2
})
new PointText({
content: 'hi there',
parent: g2
})
var sleep = function(ms, f){setTimeout(f, ms)}
sleep(1000, () => {
g2.position += [20, 20]
g1.children[1].fillColor = 'blue'
g1.children[1].bringToFront();
sleep(1000, () => {
g1.bringToFront()
})
})
How can we keep those texts in front of any other items in the canvas at any time?
Note: A possible solution would be getting the texts out of groups and manually positioning them. However, this will introduce huge design changes in the actual application.
paperjs
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
In the following example, labels can't be seen at any time:
var g1 = new Group({
position: view.center,
applyMatrix: false
})
new Shape.Circle({
radius: 50,
fillColor: 'red',
parent: g1
})
new PointText({
content: 'hello world',
parent: g1
})
var g2 = new Group({
position: view.center += [10, 10],
applyMatrix: false
})
new Shape.Circle({
radius: 40,
fillColor: 'yellow',
parent: g2
})
new PointText({
content: 'hi there',
parent: g2
})
var sleep = function(ms, f){setTimeout(f, ms)}
sleep(1000, () => {
g2.position += [20, 20]
g1.children[1].fillColor = 'blue'
g1.children[1].bringToFront();
sleep(1000, () => {
g1.bringToFront()
})
})
How can we keep those texts in front of any other items in the canvas at any time?
Note: A possible solution would be getting the texts out of groups and manually positioning them. However, this will introduce huge design changes in the actual application.
paperjs
paperjs
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
edited Nov 22 '18 at 8:12
ceremcem
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
asked Nov 22 '18 at 7:50
ceremcemceremcem
1,25421536
1,25421536
1
I think that the workaround you are describing is the better way to do what you describe. There is no way to draw texts above circle without changing their order, this is how the library works. You can still fork the library and change its behaviour to allow doing what you want. Can you add details about your application design that prevent you from separating circles and texts (maybe there are other solutions) ?
– sasensi
Nov 22 '18 at 8:10
1
Please see: github.com/ceremcem/aecad/issues/9
– ceremcem
Nov 22 '18 at 8:29
@sasensi Within the "rehydration" process, related Paper.js items are determined by Paper.jsitem.children. If we separate the labels from the component group, it'll be a non-trivial task to find related parts within the project while resuming an aeCAD object.
– ceremcem
Nov 22 '18 at 8:42
About finding related part, maybe using item.id and item.data to create a basic relational data model could help ? E.g.circle.data.labelId = label.id.
– sasensi
Nov 22 '18 at 8:58
Relational model will solve the case. However, as this application is used for engineering purposes, data integrity is extremely important. If anything happens while moving a "group" (app hang+crash), one piece might be moved and the other might not. This will force us to introduce a transaction semantic: First mark the group of items to be moved, then move, then clear the dirty flag. If app crashes in the process, the journal will be used to recover last action.
– ceremcem
Nov 23 '18 at 11:28
|
show 1 more comment
1
I think that the workaround you are describing is the better way to do what you describe. There is no way to draw texts above circle without changing their order, this is how the library works. You can still fork the library and change its behaviour to allow doing what you want. Can you add details about your application design that prevent you from separating circles and texts (maybe there are other solutions) ?
– sasensi
Nov 22 '18 at 8:10
1
Please see: github.com/ceremcem/aecad/issues/9
– ceremcem
Nov 22 '18 at 8:29
@sasensi Within the "rehydration" process, related Paper.js items are determined by Paper.jsitem.children. If we separate the labels from the component group, it'll be a non-trivial task to find related parts within the project while resuming an aeCAD object.
– ceremcem
Nov 22 '18 at 8:42
About finding related part, maybe using item.id and item.data to create a basic relational data model could help ? E.g.circle.data.labelId = label.id.
– sasensi
Nov 22 '18 at 8:58
Relational model will solve the case. However, as this application is used for engineering purposes, data integrity is extremely important. If anything happens while moving a "group" (app hang+crash), one piece might be moved and the other might not. This will force us to introduce a transaction semantic: First mark the group of items to be moved, then move, then clear the dirty flag. If app crashes in the process, the journal will be used to recover last action.
– ceremcem
Nov 23 '18 at 11:28
1
1
I think that the workaround you are describing is the better way to do what you describe. There is no way to draw texts above circle without changing their order, this is how the library works. You can still fork the library and change its behaviour to allow doing what you want. Can you add details about your application design that prevent you from separating circles and texts (maybe there are other solutions) ?
– sasensi
Nov 22 '18 at 8:10
I think that the workaround you are describing is the better way to do what you describe. There is no way to draw texts above circle without changing their order, this is how the library works. You can still fork the library and change its behaviour to allow doing what you want. Can you add details about your application design that prevent you from separating circles and texts (maybe there are other solutions) ?
– sasensi
Nov 22 '18 at 8:10
1
1
Please see: github.com/ceremcem/aecad/issues/9
– ceremcem
Nov 22 '18 at 8:29
Please see: github.com/ceremcem/aecad/issues/9
– ceremcem
Nov 22 '18 at 8:29
@sasensi Within the "rehydration" process, related Paper.js items are determined by Paper.js
item.children. If we separate the labels from the component group, it'll be a non-trivial task to find related parts within the project while resuming an aeCAD object.– ceremcem
Nov 22 '18 at 8:42
@sasensi Within the "rehydration" process, related Paper.js items are determined by Paper.js
item.children. If we separate the labels from the component group, it'll be a non-trivial task to find related parts within the project while resuming an aeCAD object.– ceremcem
Nov 22 '18 at 8:42
About finding related part, maybe using item.id and item.data to create a basic relational data model could help ? E.g.
circle.data.labelId = label.id.– sasensi
Nov 22 '18 at 8:58
About finding related part, maybe using item.id and item.data to create a basic relational data model could help ? E.g.
circle.data.labelId = label.id.– sasensi
Nov 22 '18 at 8:58
Relational model will solve the case. However, as this application is used for engineering purposes, data integrity is extremely important. If anything happens while moving a "group" (app hang+crash), one piece might be moved and the other might not. This will force us to introduce a transaction semantic: First mark the group of items to be moved, then move, then clear the dirty flag. If app crashes in the process, the journal will be used to recover last action.
– ceremcem
Nov 23 '18 at 11:28
Relational model will solve the case. However, as this application is used for engineering purposes, data integrity is extremely important. If anything happens while moving a "group" (app hang+crash), one piece might be moved and the other might not. This will force us to introduce a transaction semantic: First mark the group of items to be moved, then move, then clear the dirty flag. If app crashes in the process, the journal will be used to recover last action.
– ceremcem
Nov 23 '18 at 11:28
|
show 1 more comment
1 Answer
1
active
oldest
votes
3
If changing order is really not an option, a possible workaround could be to play with colors and blend mode to make below items visible.
For example, if you have a black background, then a white text, then an orange circle on top of it, if the orange circle have a screen blend mode, white text will still be visible through it.
Here is a sketch demonstrating the solution.
// draw a black background so we can see white text
new Path.Rectangle({
from: [0, 0],
to: [200, 200],
fillColor: 'black'
});
// draw a white text
new PointText({
content: 'Your label here',
point: [100,80],
fontSize:20,
justification: 'center',
fillColor: 'white'
});
// draw a circle with screen blend mode
new Path.Circle({
center: [50,100],
radius: 50,
fillColor: 'orange',
blendMode: 'screen'
});
// draw a circle with normal blend mode
new Path.Circle({
center: [150,100],
radius: 50,
fillColor: 'orange',
blendMode: 'normal'
});
// draw instructions
new PointText({
content: 'Left circle has a screen blend mode so text is visible even if it is below it',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426138%2fhow-to-bring-a-group-item-on-top-of-all-items-in-paper-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
If changing order is really not an option, a possible workaround could be to play with colors and blend mode to make below items visible.
For example, if you have a black background, then a white text, then an orange circle on top of it, if the orange circle have a screen blend mode, white text will still be visible through it.
Here is a sketch demonstrating the solution.
// draw a black background so we can see white text
new Path.Rectangle({
from: [0, 0],
to: [200, 200],
fillColor: 'black'
});
// draw a white text
new PointText({
content: 'Your label here',
point: [100,80],
fontSize:20,
justification: 'center',
fillColor: 'white'
});
// draw a circle with screen blend mode
new Path.Circle({
center: [50,100],
radius: 50,
fillColor: 'orange',
blendMode: 'screen'
});
// draw a circle with normal blend mode
new Path.Circle({
center: [150,100],
radius: 50,
fillColor: 'orange',
blendMode: 'normal'
});
// draw instructions
new PointText({
content: 'Left circle has a screen blend mode so text is visible even if it is below it',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
add a comment |
3
If changing order is really not an option, a possible workaround could be to play with colors and blend mode to make below items visible.
For example, if you have a black background, then a white text, then an orange circle on top of it, if the orange circle have a screen blend mode, white text will still be visible through it.
Here is a sketch demonstrating the solution.
// draw a black background so we can see white text
new Path.Rectangle({
from: [0, 0],
to: [200, 200],
fillColor: 'black'
});
// draw a white text
new PointText({
content: 'Your label here',
point: [100,80],
fontSize:20,
justification: 'center',
fillColor: 'white'
});
// draw a circle with screen blend mode
new Path.Circle({
center: [50,100],
radius: 50,
fillColor: 'orange',
blendMode: 'screen'
});
// draw a circle with normal blend mode
new Path.Circle({
center: [150,100],
radius: 50,
fillColor: 'orange',
blendMode: 'normal'
});
// draw instructions
new PointText({
content: 'Left circle has a screen blend mode so text is visible even if it is below it',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
add a comment |
3
3
3
If changing order is really not an option, a possible workaround could be to play with colors and blend mode to make below items visible.
For example, if you have a black background, then a white text, then an orange circle on top of it, if the orange circle have a screen blend mode, white text will still be visible through it.
Here is a sketch demonstrating the solution.
// draw a black background so we can see white text
new Path.Rectangle({
from: [0, 0],
to: [200, 200],
fillColor: 'black'
});
// draw a white text
new PointText({
content: 'Your label here',
point: [100,80],
fontSize:20,
justification: 'center',
fillColor: 'white'
});
// draw a circle with screen blend mode
new Path.Circle({
center: [50,100],
radius: 50,
fillColor: 'orange',
blendMode: 'screen'
});
// draw a circle with normal blend mode
new Path.Circle({
center: [150,100],
radius: 50,
fillColor: 'orange',
blendMode: 'normal'
});
// draw instructions
new PointText({
content: 'Left circle has a screen blend mode so text is visible even if it is below it',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
If changing order is really not an option, a possible workaround could be to play with colors and blend mode to make below items visible.
For example, if you have a black background, then a white text, then an orange circle on top of it, if the orange circle have a screen blend mode, white text will still be visible through it.
Here is a sketch demonstrating the solution.
// draw a black background so we can see white text
new Path.Rectangle({
from: [0, 0],
to: [200, 200],
fillColor: 'black'
});
// draw a white text
new PointText({
content: 'Your label here',
point: [100,80],
fontSize:20,
justification: 'center',
fillColor: 'white'
});
// draw a circle with screen blend mode
new Path.Circle({
center: [50,100],
radius: 50,
fillColor: 'orange',
blendMode: 'screen'
});
// draw a circle with normal blend mode
new Path.Circle({
center: [150,100],
radius: 50,
fillColor: 'orange',
blendMode: 'normal'
});
// draw instructions
new PointText({
content: 'Left circle has a screen blend mode so text is visible even if it is below it',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
answered Nov 22 '18 at 8:50
sasensisasensi
1,658222
1,658222
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426138%2fhow-to-bring-a-group-item-on-top-of-all-items-in-paper-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I think that the workaround you are describing is the better way to do what you describe. There is no way to draw texts above circle without changing their order, this is how the library works. You can still fork the library and change its behaviour to allow doing what you want. Can you add details about your application design that prevent you from separating circles and texts (maybe there are other solutions) ?
– sasensi
Nov 22 '18 at 8:10
1
Please see: github.com/ceremcem/aecad/issues/9
– ceremcem
Nov 22 '18 at 8:29
@sasensi Within the "rehydration" process, related Paper.js items are determined by Paper.js
item.children. If we separate the labels from the component group, it'll be a non-trivial task to find related parts within the project while resuming an aeCAD object.– ceremcem
Nov 22 '18 at 8:42
About finding related part, maybe using item.id and item.data to create a basic relational data model could help ? E.g.
circle.data.labelId = label.id.– sasensi
Nov 22 '18 at 8:58
Relational model will solve the case. However, as this application is used for engineering purposes, data integrity is extremely important. If anything happens while moving a "group" (app hang+crash), one piece might be moved and the other might not. This will force us to introduce a transaction semantic: First mark the group of items to be moved, then move, then clear the dirty flag. If app crashes in the process, the journal will be used to recover last action.
– ceremcem
Nov 23 '18 at 11:28