Comments (9)
Hi Samvherck, ZIM basic shapes (Rectangle, Circle, Triangle) are Containers but they have their mouseChildren property set to false - so the container is dragged, etc. rather than the shape inside the container. So... you can use a Container that holds map and line - as I find it best not to think of the Rectangle as a container. Or you can leave the structure how you have it and then set map.mouseChildren = true; and then on your drag use currentTarget:true. Then dragging the map will drag the whole map (the event object's currentTarget) and not its contents (the event object's target) and the rollover will still work on the line. Hope this helps.
from zimjs.
Hello danzen, thanks for the quick response. I like the idea of placing the line and map in a new container, but this still doesn't result in the expected behaviour where the line is also moved when dragging the map. I made a fiddle: https://jsfiddle.net/6dm2hpzr/2/
from zimjs.
I suspect what you want is this? Where the Container is what is being masked. Then if you drag the container you would need to set currentTarget:true so you do not end up dragging the things inside individually. And note - the drag has a rect param (you had accidentally put a mask param).
var scaling = "fit";
var width = 1024;
var height = 768;
var frame = new Frame(scaling, width, height);
frame.on("ready", function () {
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
frame.outerColor = "#444";
frame.color = "#ddd";
var container = new Container();
var map = new Rectangle(stageW, stageH, frame.blue).addTo(container);
container.center();
var mask = new Rectangle(600, 400).pos(200, 100, stage, 0);
container.setMask(mask);
container.drag({
rect:new createjs.Rectangle(200, 100, 600, 400),
surround:true,
slide:true,
dragCursor:"pointer",
currentTarget:true
});
var line = new Rectangle(375, 50, frame.red).pos(300, 300, container);
line.on("mouseover", function() {
console.log("test");
});
stage.update();
});
from zimjs.
Thanks danzen, that worked. Is it somehow possible for an object to be a child of the container, meaning it will be moved when the container is dragged but still can be dragged separately?
My goal is to create a combination of the slide example (zimjs.com/bits/view/slide.html) and a drag (zimjs.com/bits/view/drag.html) where the stage can be larger than the screen and moved when dragging it (also repositioning child objects), but where it is also possible to drag object separately.
from zimjs.
Hi Sam, sorry for the delay - just saw this. Put a drag() on the line (or object in the container you want to drag) and then add a stopPropagation() on the mousedown event object. I think this will stop the container from being dragged - note that this is not a stopImmediatePropagation() which would also stop the line from being dragged ;-).
var line = new Rectangle(375, 50, frame.red)
.pos(300, 300, container)
.drag();
line.on("mousedown", function(e) {e.stopPropagation();});
// line.on("mouseover", function() {
// console.log("test");
// });
from zimjs.
Oh... you will probably want to put bounds on the things you are dragging in the container - so use localBounds:true in the drag along with a rect:
var line = new Rectangle(375, 50, frame.red)
.pos(300, 300, container)
.drag({rect:new createjs.Rectangle(0,0,map.width-375,map.height-50), localBounds:true});
line.on("mousedown", function(e) {e.stopPropagation();});
from zimjs.
Here the example I was testing http://zimjs.com/explore/dragdrag.html
from zimjs.
Hello danzen, that is exactly what I was going for. Thanks!
from zimjs.
Excellent!
from zimjs.
Related Issues (20)
- Frame LoadAssets Problem HOT 2
- centerReg() does not working on ZimJS version 10 HOT 2
- Label.labelWidth change issue. HOT 1
- Zim.Frame("tagID") does not work well. HOT 3
- In IE11, the Frame can't load all images succeeded in the first time. HOT 4
- [Question] Can a movable element be present on more than 1 square? HOT 1
- Refactoring code HOT 4
- hi, is it possible run on an environment which has no dom bom environment HOT 25
- h and v scroll conflicts list & window. HOT 7
- 2 bugs found. HOT 2
- bug report: SVGContainer("xxx.svg") parse error, but bitmap ("xxx.svg") works. HOT 3
- using zimjs in angular project HOT 4
- Drag make animation weird in ZIMSHIM (adobe animate) HOT 2
- please update typing definition for typescript user HOT 1
- Where is library repository? HOT 1
- Render to Three JS Canvas Texture HOT 4
- Invalid redirect HOT 1
- access to plasma zapp not working HOT 1
- ZIM NPM, Vue, Svelte, React and Angular HOT 2
- ball movement with connected physics HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from zimjs.