I have set up mousewheel support like this:
mousewheel: {
items: 1,
easing: 'linear',
duration: 100,
queue: 'last'
}
The problem is that I would like scrolling by mousewheel to be non-discrete. Atm. the minimum shift when scrolling is by height of an item. I want it to move by pixels continuously.
Not possible. The answer is to use another plugin if you want fluid scrolling, e.g. http://manos.malihu.gr/jquery-custom-content-scroller/
Related
Goal is to show a text the largest possible on the screen in any orientation so the solution I had in mind was to make the font size considerably big but add a minimum scale factor modifier to it such as the following.
struct ContentView: View {
var body: some View {
Text("U")
.font(.system(size: 2000
)) .multilineTextAlignment(.center).minimumScaleFactor(0.001).padding()
}
}
how ever what is shown on canvas is the picture below and is trimmed on the right side.
This will achieve the look you are after:
Text("U")
.font(.system(size: 2000))
.minimumScaleFactor(.leastNonzeroMagnitude)
I have a graph generated using JointJs and it uses Dagre Layout provided by jointjs. Currently, the graph gets aligned from Top To Bottom which is the correct way but then the complete graph gets aligned to the left of the paper.
I need the graph to be aligned in the middle of the Paper Horizontally.
Current configuration used is this:
joint.layout.DirectedGraph.layout(graph,
{
rankDir: "TB",
marginX: 30,
marginY: 30,
clusterPadding: {
top: 10,
left: 10,
right: 10,
bottom: 10
}
}
I see that the option to make graph flow from Top to bottom is given rankDir: "TB". Is there any similar option which can align it horizontally to the middle instead of left which is by default? or any other way which can do so.
After calling directedGraph.layout you can then use Paper class to center the diagram.
const paper = new joint.dia.Paper({
height: 1000,
width: 1000,
...
});
const paperArea = paper.getArea();
const contentArea = paper.getContentArea();
paper.translate((paperArea.width - contentArea.width) / 2, (paperArea.height - contentArea.height) / 2);
This will effectively center the diagram, although care should be taken to avoid the content being larger than the paper size.
I am Japanese, and I want to write Japanese words vertically in Fabric.js.
Japanese language has small letters, and the positions of the them are top-left corner in vertical writing.
So, I want to change the position of a small letter in iText.
I thought that I can change the position of a character by using "styles" parameter of iText, so I wrote as follows.
var iTextSample = new fabric.IText('h\ne\nl\nl\no', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
1: {
0: { textDecoration: 'underline', ←★ WORK
fontSize: 80, ←★ WORK
top:-10, ←★ NOT WORK
transformMatrix: [ 1, 0, 0, 1, 18, -50 ] ←★ NOT WORK
},
},
}
});
https://jsfiddle.net/uemon/tLy9eqj6/77/
The 'textDecoration' and 'fontSize' worked, but the 'top' or 'transformMatrix' didn't work.
Can't I use 'top' or 'transformMatrix' in the "styles" parameter ?
How can I change the position of one character ?
Thank you in advance.
So from the use of textDecoration property i guess you are on the 1.7 or similar version.
You should really move to the 2.0 version that has integrated support for multibyte languages and composition.
Said that, there is no support for vertical text in fabricjs at all.
This may change in the future.
You should really go here:
https://github.com/kangax/fabric.js/issues/511
refresh the request and maybe add some detail about it, because the actual mantainer may have no clue on how vertical text should work regarding input, decorations, multiple columns and so on.
I'm working with a basic Caroufredsel setup with a main image up top, and thumbnails below. My issue is getting the thumbnails to show at the right size whether there's just one, two, or more. I've got it so that it's almost there, with one remaining weird issue.
When the div is shown, the thumbnails don't appear; with the debugger I can see that the caroufredsel_wrapper class has a width of 0, even though I've tried setting it explicitly to 330 in the config. If I resize the browser, then it "wakes up" and the width gets set correctly. I haven't been able to figure out what's causing this.
The config:
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
width: 330,
height: 65,
auto: false,
items: {
width : "auto",
height : "50%",
visible : {
min : 4,
max : 5
}
}
});
Earlier, I had no height/width specified for the carousel, and explicit "width: 150, height: 75" for the items. Everything was rendered as expected, but the width of the items was actually variable so the images were stretched if only 1 or 2 thumbnails were present. Why the explicit item height/width was ignored also remains a mystery.
Any suggestions would be fantastic; it's driving me nuts.
The above comment is correct. If you put the carousel in a hidden div that you later reveal by tabs it will make all the heights and widths to be zero so it will seem like caroufredsel is hidden.
You can attach the update sizes trigger to the tab click. E.g.
$j("ul.tabs a[href=#tab2]").click( function() {
setTimeout(function() {
$("#thumbs").trigger('updateSizes');
}, 200);
});
The delay ensures the container is displayed before updateSizes triggers.
I'm trying to write a topbar for my application that should contain mainly the app logo (a small image) and the app title (just text). Moreover, I'd like this topbar to automatically resize according to the window's height.
I'm new to QML, but I suppose that I should wrap these components inside a Row or a RowLayout component. This is my sample code:
import QtQuick 2.0
import QtQuick.Layouts 1.0
Rectangle
{
id: mainwindow
width: 1024
height: 600
Row
{
id: rowlayout
height: logoimage.height
spacing: 5
property int count: 3
anchors
{
left: parent.left
right: parent.right
top: parent.top
}
Image
{
id: logoimage
source: "qrc:/images/resources/images/icon.png"
height: mainwindow.height / 20
anchors.top: parent.top
anchors.left: parent.left
}
Text
{
id: logotext
text: qsTr("This is my logo text")
font.pixelSize: parent.height
font.family: "Sans Serif"
height: parent.height
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.left: logoimage.right
}
/*
Rectangle
{
id: otherrect
height: parent.height
color: "lightgreen"
anchors.top: parent.top
anchors.left: logotext.right
anchors.right: parent.right
}
*/
}
}
I tell to the Row component that its height should follow the logo's height, and to the Image (logo) component that its height should be 1/20th of the Rectangle (mainwindow) component.
Using a Row container, the code behaves as expected but I get an annoying warning (QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.) and I have to do a lot of anchoring. Conversely, if I use a RowLayout container, I can remove most of the anchors but the Image completely ignores its height attribute (but the text still resizes correctly). So the questions are:
is this a bug of the RowLayout component? I'm using Qt-5.1.0-Beta with Android support, so this could be an explanation
how can I use a Row component without using anchors in its children and thus avoid the warning?
I'm missing something important or I'm almost on the right track but I have to bear with this beta of Qt until a stable version is released?
You said that you get the expected behavior with Row, so you should probably use it. The warning that Row is giving is asking you to remove the vertical anchors (top and bottom) from its child elements.
The Row element provides horizontal (left and right) anchor-like behavior for its child elements, but it doesn't mind if you use top and bottom anchors (notice that top and bottom were not in the warning).
In other words remove "anchors.left" and/or "anchors.right" lines from "logoimage", "logotext", and "otherrect" (if you plan on uncommenting it at some point), but not the "anchors.top" lines, and that should stop the warning and keep the correct behavior.
An alternative is to just remove the Row element and use Item or FocusScope (if you plan on having input elements in your "top bar" area), which will not try to take over anchoring operations, and that may be a better fit for you if you really like anchors.
You need to give a width to your layout if you want it to strecht its children, either with width: parent.width, or better, with anchors { left: parent.left; right: parent.right } and no anchors on vertical lines inside childrens of the layout.
1) NO, it is no a bug of RowLayout
2) Consider that RowLayout is preferred to Row because is most expressive for components placing. The Row component is better that Rowlayout only for graphics or animation apps
3) The stable version is now available, but your errors are not bugs ;)