I've created 4 rects using for loop. If you hover on any of these rects a rect will be displayed alongside. But the problem is that newly displayed rect doesn't hide on mouse out. What is wrong with my code?
JS Fiddle
window.onload = function() {
var paper = Raphael(0, 0, 640, 540);
function aa(h1,h2){
var showbox = paper.rect(h1+300,h2,100,100);
}
function ab(){
showbox.hide();
}
for (i = 0; i < 2; i++) {
for (j = 0; j < 2; j++) {
(function(i, j) {
var boxes = paper.rect(0 + (j * 100), 0 + (i * 100), 100, 100).attr({
fill: '#303030',
stroke: 'white'
});
boxes.node.onmouseover = function() {
var h1 = boxes.getBBox().x;
var h2 = boxes.getBBox().y;
aa(h1,h2);
};
boxes.node.onmouseout = function() {
ab();
};
})(i, j);
}
}
You've got javascript scope problems (plus two other smaller problems, see below).
The variable showbox is defined within function aa. So your onmouseout function can't see it. Get Firebug or your browser's equivalent up and you'll see a stack of showbox is not defined errors.
Tip: When working with Raphael, I usually create an object or array that contains all my created objects, keyed for easy access and scoped above all my Raphael-related functions so all of them can access it (see jsfiddle example below).
How to access your Raphael objects is a piece of application design you need to decide on early on, else you'll need to do lots of refactoring further down the line (been there, it hurts!).
Here's an adapted version of your code that works:
jsfiddle
Edit: I added comments explaining each change.
It also fixes two other problems:
(In the jsfiddle code) No such attr as display: none; in Raphael, try .attr({opacity:0}) or .hide()...
...BUT... don't! Your mouseover event creates rectangles, your mouseout event... hides them...? You're going to have an ever-growing stack of invisible rectangles that could eventually crash someone's browser. Either show, then hide, or create, then remove - don't create then hide!
The mouseover / mouseout events themselves are actually fine! :-)
Related
I have Qt Quick Controls 2 Application. In main.qml I have besides other things canvas in scroll view:
Rectangle {
id: graph
width: mainArea.width / 3 - 14;
height: mainArea.height - 20;
ScrollView{
anchors.fill: parent;
Canvas {
id:canvasGraph;
width: graph.width;
height: graph.height;
property bool paintB: false;
property string colorRect: "#FFFF40";
property string name: "ELF header";
property int paintX: 0;
property int paintY: 0;
property int widthP: 160;
property int heightP: 30;
property int textX: (paintX + (widthP / 2)) - 15/*func return int length of text*/;
property int textY: (paintY + (heightP / 2)) + 3;
onPaint:{
if (paintB){
var ctx = canvasGraph.getContext('2d');
ctx.beginPath();
ctx.font = "normal 12px serif";
ctx.fillStyle = colorRect;
ctx.strokeRect(paintX, paintY, widthP, heightP);
ctx.fillRect(paintX, paintY, widthP, heightP);
ctx.strokeText("ELF header", textX, textY);
ctx.closePath();
ctx.save();
}
}
MouseArea{
id: canvasArea;
anchors.fill: parent;
onPressed: {
paint(mouseX,mouseY,"aaa",1);
}
}
}
}
}
At first I tried draw into canvas by js function, here:
function paint(x, y, name, type) {
canvasGraph.paintB = true;
canvasGraph.paintX = x;
canvasGraph.paintY = y;
canvasGraph.requestPaint();
}
This function was called by pressing mouse on canvas. It works good, it draw rectangles, one by one. But only one problem was, that after resizing app window, all rectangles except last one get lost. But it's not primary problem, because it works and this promblem I could resolve later.
For drawing chart I need C++ library (ELFIO, for reading ELF files). So in main.cpp I have two object. First allows me call from main.qml functions of some C++ class. Second allows me calling js functions from C++. Here is main.cpp:
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QScopedPointer<elfFile> elfFileObj(new elfFile);
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
engine.rootContext()->setContextProperty("elfFileObj", elfFileObj.data()); //this is for calling c++ from qml
QObject *rof = engine.rootObjects().first();
elfFileObj.data()->rofS = rof; //this one is for calling js func from c++
return app.exec();
How you can see, reading ELF files is manage from object elfFileObj, where is public variable which holds loaded ELF file and variable rofS which hold object for access to main.qml to js functions.
In elfFileObj is Q_INVOKABLE int loadELF(QString fileName); where Q_INVOKABLE is macro, which ensure, that this function is possible call from qml file. Function:
int elfFile::loadELF(QString fileName)
{
string fileNameReal = (fileName).toStdString().substr(7);
if (!reader.load(fileNameReal.c_str())){
return -1;
}
QVariant x(30);
QVariant y(10);
QVariant name("ELF header");
QVariant type(1);
QMetaObject::invokeMethod(rofS, "paint", Q_ARG(QVariant,x), Q_ARG(QVariant,y), Q_ARG(QVariant,name), Q_ARG(QVariant,type));
y = QVariant(40);
QMetaObject::invokeMethod(rofS, "paint", Q_ARG(QVariant,x), Q_ARG(QVariant,y), Q_ARG(QVariant,name), Q_ARG(QVariant,type));
}
I try draw two rectangles, one by one. QMetaObject::invokeMethod should call js functions, which draw rectangle on (x,y). Other args are in this moment unusable.
Main problem: It draw rectangles on canvas, but after every call by invokeMethod is canvas cleared. So on the canvas always stay only last one rectangle.
Have somebody any idea, how to save actual state of canvas? Thanks for any help.
It isn't pretty code, but it's my first experience with qml.
The canvas, being an imperative drawing API, just has a dumb buffer of pixel data. It has no concept of objects like rectangles or anything else once the draw call has finished. As such, you are responsible for everything that it displays via your onPaint handler. It does not clear the canvas content from one frame to another (as an optimization), but it will (by necessity) clear it when you resize the window, as it has to allocate a differently sized buffer.
You can see this behaviour here:
import QtQuick 2.6
Canvas {
id: canvasGraph;
width: 500
height: 500
property int paintY: 10;
onPaint:{
var ctx = canvasGraph.getContext('2d');
ctx.beginPath();
ctx.font = "normal 12px serif";
ctx.fillStyle = "#ff0000";
ctx.strokeRect(10, paintY, 160, 30);
ctx.fillRect(10, paintY, 160, 30);
ctx.closePath();
ctx.save();
}
Timer {
interval: 16
running: true
repeat: true
onTriggered: {
canvasGraph.requestPaint();
canvasGraph.paintY += 10
if (canvasGraph.paintY > canvasGraph.height)
canvasGraph.paintY = 10
}
}
}
Try run this example with qmlscene and resize the window. You'll notice that all content is cleared on resize, except that one single rectangle that it draws.
So, if you want all your rectangles to be retained, then you need to paint them in the onPaint handler each time (and make use of clearRect or some other method to fill the background to get rid of stuff that doesn't belong there anymore, if you are moving stuff around or making them invisible).
On the other hand, I can't directly explain why invokeMethod would be causing it to clear, as you haven't really presented enough code. It may be that it's resizing the canvas (causing the buffer to reallocate, and be cleared). Either way, given the above, I'd say that it isn't all that relevant.
After all this, while I don't have full background over what you are making, I'd suggest that perhaps Canvas might not be the best tool to do what you want. You might want to look into QQuickPaintedItem instead, or (better still) composing your scene using a custom QQuickItem which positions other QQuickItems (or QSGNodes). Canvas (and QQuickPaintedItem) while easy to use, are not especially performant.
I didn't solved this problem. I just stop using QML and return to use just Qt. It helps me.
In my GUI, I have a scrollable area and a widget to be displayed in it defined like so:
_scoreBoxScroll = new QScrollArea(this);
_scoreBoxScroll->setFrameShape(QFrame::NoFrame);
_scoreBoxWidget = new QWidget(this);
_scoreBoxWidgetLayout = new QHBoxLayout(_scoreBoxWidget);
Some custom widgets are added later in a function:
for (int i = 1; i <= _db->gamesPerRound(); ++i) {
GameWidget *newGame = new GameWidget(_scoreBoxWidget, i, _db->playersString(MT::singular), _db->boogerScore());
_scoreBoxWidgetLayout->addWidget(newGame);
}
_scoreBoxScroll->setWidget(_scoreBoxWidget);
This results in a wrong background color for the GameWidgets:
When I add those widgets in the constructor with the very same code (and the _db calls replaced with static values, as when the constructor is called, there's no _db yet), the widgets are displayed with the correct color:
In case this is interesting: the whole code can be found in git://l3u.de/muckturnier.git, the posted code resides in ScorePage/ScorePage.cpp.
Why is a different color displayed here? And how can I fix this? Thanks in advance for all help!
Edit: the code in the constructor used in the second example is (as I don't have _db there):
_scoreBoxWidget = new QWidget(this);
_scoreBoxWidgetLayout = new QHBoxLayout(_scoreBoxWidget);
_scoreBoxLayout->addWidget(_scoreBoxWidget);
for (int i = 1; i <= 2; ++i) {
GameWidget *newGame = new GameWidget(this, i, QString::fromUtf8("Paar"), 21);
_scoreBoxWidgetLayout->addWidget(newGame);
}
_scoreBoxScroll->setWidget(_scoreBoxWidget);
Edit: I have created a minimalistic demo in the "demo" branch on git://l3u.de:muckturnier.git – I would be very glad if anyone could explain this behaviour!
Okay, I can answer my question myself now. It's due to the fact that QScrollArea::setWidget() calls setAutoFillBackground(true) on the added widget. When I add a manual
_scoreBoxWidget->setAutoFillBackground(false);
after the
_scoreBoxScroll->setWidget(_scoreBoxWidget);
the background color is as expected.
I've been trying to remove elements (balls) that have been added to the Physics engine, but I can't find a way to do it.
This is the code I'm using to add the molecules to the Physics Engine:
var numBodies = 15;
function _addMolecules() {
for (var i = 0; i < numBodies; i++) {
var radius = 20;
var molecule = new Surface({
size: [radius * 2, radius * 2],
properties: {
borderRadius: radius + 'px',
backgroundColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
}
});
molecule.body = new Circle({
radius: radius,
mass: 2
});
this.pe.addBody(molecule.body);
this.molecules.push(molecule);
this.moleculeBodies.push(molecule.body);
molecule.state = new Modifier({origin: [0.5, 0.5]});
//** This is where I'm applying the gravity to the balls and also where I'm checking the position of each ball
molecule.state.transformFrom(addBodyTransform.bind(molecule.body));
this._add(molecule.state).add(molecule);
}
}
and on the addBodyTransform function I'm adding the gravity to the balls and checking their position, and for any that are outside the top part of the viewport I want to remove it completely (I'm only using walls on the left, right and bottom edges of the viewport).
function addBodyTransform() {
var pos;
for (var i = 0; i < thisObj.moleculeBodies.length; i++) {
pos = thisObj.moleculeBodies[i].getPosition();
if(pos[1]<(-windowY/2)){
//I tried this but it doesn't work
thisObj.pe.removeBody(thisObj.moleculeBodies[i]);
thisObj.moleculeBodies[i].render = function(){ return null; };
}
}
thisObj.gravity.applyForce(this);
return this.getTransform();
}
It doesn't work. I tried a couple of other things, but no luck. Whereas changing the position of the balls on the function above worked fine:
thisObj.moleculeBodies[i].setPosition([0, 0]);
Does anybody have any idea how to remove a body (a circle in this case)?
P.S.: thisObj is the variable I'm assign the "this" object to in the constructor function and thisObj.pe is the instance of the PhysicsEngine(). Hope that makes sense.
After some investigation, using the unminified source code and trying out different things, I realised that there was something weird going on in the library.
Having a look at the repository, I found out that the function _getBoundAgent is being used before it is defined, which matched with the error I was getting (you can check it here: https://travis-ci.org/Famous/physics). So it looks like it is a bug in the Famo.us source-code. Hopefully it will be fixed in the next release.
For the time being, I had to create a hack, which is basically detaching all agents (as well as gravity) from the balls that go outside the viewport and setting their (fixed) position far outside the viewport (about -2000px in both directions).
I know it is not the best approach (a dirty one indeed), but if you have the same problem and want to use it until they release a fix for that, here is what I did:
function addBodyTransform() {
var pos = this.body.getPosition();
//Check if balls are inside viewport
if(pos[1]<(-(windowY/2)-100)){
if(!this.removed){
//flagging ball so the code below is executed only once
this.removed = true;
//Set position (x and y) of the ball 2000px outside the viewport
this.body.setPosition([(-(windowX/2)-2000), (-(windowY/2)-2000)]);
}
return this.body.getTransform();
}else{
//Add gravity only if inside viewport
thisObj.gravity.applyForce(this.body);
return this.body.getTransform();
}
}
and on the _addMolecules function, I'm adding a "molecule.removed = false":
function _addMolecules() {
for (var i = 0; i < numBodies; i++) {
...
molecule.state = new Modifier({origin: [0.5, 0.5]});
//Flagging molecule so I know which ones are removed
molecule.removed = false;
molecule.state.transformFrom(addBodyTransform.bind(molecule));
this._add(molecule.state).add(molecule);
}
}
Again, I know it is not the best approach and I will be keen in hearing from someone with a better solution. :)
I'd like create an echo effect with many circles with smaller circle than the next one.
for(i=0; i<n; i++){
circle = paper.circle(...);
myset.push(circle);
}
Here's is an example that may do what you want, if not, there should be enough bits in it to show how you could. You don't really need a set, but you could add it if you want to do something with it later.
The animation element includes a delay parameter you can use, and then apply the animation to the shape.
var paper = Raphael("container"), myCircle, myAnimation;
myAnimation = Raphael.animation({r: 100, opacity: 1}, 3000, "linear", function() { this.remove() });
for( var c=1; c<10; c++ ) {
myCircle = paper.circle(10,10,10)
.attr("opacity", 0.2)
.animate( myAnimation.delay(c*300) );
}
With a working jsfiddle here... http://jsfiddle.net/9QmRe/9/
I started to play a little bit with raphaeljs, however I'm having a small problem when dragging and applying a transformation to a Paper.set()
Here is my example: http://jsfiddle.net/PQZmp/2/
1) Why is the drag event added only to the marker and not the slider?
2) The transformation is supposed to be relative(i.e. translate by and not translate to), however if I drag the marker twice, the second dragging starts from the beginning and not from the end of the first.
EDIT:
After the response of Zero, I created a new JSFiddle example: http://jsfiddle.net/9b9W3/1/
1) It would be cool if this referenced the set instead of the first element of the set. Can't this be done with dragger.apply(slider)? I tried it, but only works on the first execution of the method (perhaps inside Raphael it is already being done but to the first element inside the set instead of the set)
2) According to Raphael docs the transformation should be relative to the object position (i.e. translate by and not translate to). But it is not what is happening according to the jsfiddle above (check both markers drag events).
3) So 2) above creates a third question. If a transform("t30,0") is a translation by 30px horizontally, how is the origin calculated? Based on attr("x") or getBBox().x?
The drag event is actually being added to both the marker and the slider -- but your slider has a stroke-width of 1 and no fill, so unless you catch the exact border, the click "falls through" to the canvas.
Behind that is another issue: the drag is being applied to both elements, but this in your drag handler references a specific element, not the set -- so both elements will drag independently from each other.
Lastly: the reason that each drag is starting from the initial position is because the dx, dy parameters in dragger are relative to the coordinates of the initial drag event, and your transform does not take previous transforms into account. Consider an alternative like this:
var r = new Raphael(0, 0, 400, 200);
var marker = r.path("M10,0L10,100").attr({"stroke-width": 5});
var button = r.rect(0, 0, 20, 20, 1).attr( { 'stroke-width': 2, fill: 'white' } );
var slider = r.set( marker, button );
var startx, starty;
var startDrag = function(){
var bbox = slider.getBBox();
startx = bbox.x;
starty = bbox.y;
console.log(this);
}, dragger = function(dx, dy){
slider.transform("t" + ( startx + dx ) + "," + starty );
}, endDrag = function(){
};
slider.drag(dragger, startDrag, endDrag);
To address your updates:
I believe you can specify the context in which the drag function will be executed as optional fourth, fifth, and six parameters to element.drag. I haven't tried this myself, but it looks like this should work great:
slider.drag( dragger, startDrag, endDrag, slider, slider, slider );
The transformation is relative to the object position. This works great for the first slider because its starting position is 0, but not so great for the second slider because...
...the transformation for min/max sliders should actually be relative to the scale, not the individual markers. Thus you will notice that your max slider (the red one) returns to its initial position just as you drag the mouse cursor back over the zero position. Make sense?
var position;
var rect = paper.rect(20, 20, 40, 40).attr({
cursor: "move",
fill: "#f00",
stroke: "#000"
});
t = paper.text(70,70, 'test').attr({
"font-size":16,
"font-family":
"Arial, Helvetica, sans-serif"
});
var st = paper.set();
st.push(rect, t);
rect.mySet = st;
rect.drag(onMove, onStart, onEnd);
onStart = function () {
positions = new Array();
this.mySet.forEach(function(e) {
var ox = e.attr("x");
var oy = e.attr("y");
positions.push([e, ox, oy]);
});
}
onMove = function (dx, dy) {
for (var i = 0; i < positions.length; i++) {//you can use foreach but I want to
// show that is a simple array
positions[i][0].attr({x: positions[i][1] + dx, y: positions[i][2] + dy});
}
}
onEnd = function() {}