I try to scroll a scroll
view to a certain position
by setPosition(x).
For a short moment the scroller
moves scroll area to the correct
position, but bounces immediately
back.
How to do this right?
With Famo.us 0.3, it seems to be working like this.
Let's say that:
My scrollview's display area is 250 pixels in height
The contents of my scrollview are total of 1000 pixels in height
I want to scroll to the very bottom of the scrollview
The code:
// Scrollview area height 250 pixels
var myScrollviewArea = 250;
// My scrollview contents' total height 1000 pixels
var myScrollviewContents = 1000;
// Contents - Area = total pixels to scroll
var scrollpx = myScrollviewContents - myScrollviewArea;
// Setting scrollview to use the first element as offset origin
myScrollview.getOffset(1);
// Setting scroll position with setOffset()
myScrollview.setOffset(scrollpx);
UPDATE
The above code seems to work very randomly, because the offset index changes.
Here's some updated code, still a bit twitchy but works:
function _scrollToBottom() {
if(myScrollviewSurfaces) {
// Pixels to scroll
var scrollpx = 0;
// Current first visible element
var index = myScrollview.getCurrentIndex();
// Offset from the top of the index
var offset = myScrollview.getOffset();
// Calculating the distance from index to bottom
for(var i = index; i < myScrollviewSurfaces.length; i++) {
scrollpx = scrollpx + myScrollviewSurfaces[index].getSize(true)[1];
}
if(offset > 0) {
scrollpx = scrollpx - offset;
}
scrollpx = scrollpx - myScrollview.getSize(true)[1];
if(scrollpx > 0) {
myScrollview.setVelocity(1);
myScrollview.setPosition(scrollpx);
}
}
}
I got it now.
The Scrollview adds a spring to the particle. When moving only the particle, the spring moves it back to it anchor.
Setting the the spring-anchor to same position fixes the problem.
scrollview.setPosition(x)
scrollview.spring.setAnchor(x)
Set the option on the scrollview. It is the size of the area (in pixels) that Scrollview will display content in.
Scrollview that spans 400px:
scrollview.setOptions({
clipSize: 400,
});
Scrollview that spans your entire context:
scrollview.setOptions({
clipSize: mainContext.getSize()[1],
});
Related
I have difficulties around changing TextView Constraints. I don't find any example how to get Integer values of Constraints. I need them for initial values before code execution.
Initial constraints are created in IB, but I need to get value for variable in code to change them with multitouch gestures. I have TextView filled with text for reading. I already arranged that with pinch I can change Font size of text with min and max values. Now I want to change TextView width with rotate gesture.
Here is part of code for pinch gesture to change font size.
//Change font size
func pinchRecognized(pinch: UIPinchGestureRecognizer) {
//get pinch value (less than 1) fingers towards each other, (more than 1) fingers apart
let pScale = pinch.scale
//get current font size
let pFont = Int((ReadTextView.font?.pointSize)!)
if pScale > 1 {
if pFont <= maxFontSize {
ReadTextView.increaseFontSize()
}
}
else if pScale < 1 {
if pFont >= minFontSize {
ReadTextView.decreaseFontSize()
}
}
else {
// do nothing
}
defaults.set(pFont, forKey: "FontSize")
}
I like now to change width of TextView with rotate gesture. To start shrink I need initial values of left (leading) and right (trailing) margins.
I have a UIImageView that you can tap on and it draws a circle. I store the location of the circles in an Array of Dictionaries. This allows me to "replay" the drawing of the circles. However, when the UIImageView is a different size from the original, the circles don't scale to the new UIImageView.
How can I get the circles to scale? For demonstration purposes, the top picture is the size of the UIImageView used for input and the second one is the size for replay.
Inputing the circles:
Replay the circles (the circles should be in the blue UIImageView
import Foundation
import UIKit
class DrawPuck {
func drawPuck(circle: CGPoint, circleColour: CGColor, circleSize: CGFloat, imageView: UIImageView) {
let circleBezierPath = UIBezierPath(arcCenter: CGPoint(x: circle.x,y: circle.y), radius: CGFloat(circleSize), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circleBezierPath.cgPath
//change the fill color
shapeLayer.fillColor = circleColour
//you can change the stroke color
shapeLayer.strokeColor = UIColor.white.cgColor
//you can change the line width
shapeLayer.lineWidth = 0.5
imageView.layer.addSublayer(shapeLayer)
}
}
I was able to resolve this with CATransform3DMakeScale As long as I keep the original aspect ratio of the original image it works great.
let width = yellowImageView.frame.width / blueImageView.frame.width
let height = yellowImageView.frame.height / blueImageView.frame.height
shapeLayer.transform = CATransform3DMakeScale(height, width, 1.0)
view.layer.addSublayer(shapeLayer)
I am looking for a more efficient way to constrain/set text in Raphael.
I have text that can be written in a box. That text should be centered (based on a number that could change if user wanted to shift text left/right) and the text cannot go beyond the boundaries of the paper.
This is what I do now and its not manageable performance wise
// Build a path
var path = this.paper.print(x, x, text, font, size, 'middle')
// Center line by getting bounding box and shifting to half of that
var bb = path.getBBox()
path.transform('...T' + [-bb.width / 2, 0])
// Compare paper size vs bb
// if it goes beyond I adjust X and Y accordingly and redo the above
So ideally I would like to predict the size of the text before it prints - I am not sure this is possible though as it is probably font dependent. I have looked for a command to contrain text but do not see one?
The other thought I had was to create some kind of shadow paper that does not print to screen and use that to determine size before I render to user. I am not sure where the lag is though - if it's in the screen rendering good but if its in the general logic of creating the svg then that wont help.
I'd appreciate suggestions
You can use opentype.js for measuring text, also you can get svg path by using Path.toPathData method. There is no need of cufon compiled js fonts.
For text measure, create a canvas element somewhere in your DOM.
<canvas id="canvas" style="display: none;"></canvas>
this function will load text and count width, height
function measureText(text, font_name, size) {
var dfd = $.Deferred();
opentype.load('/fonts/' + font_name + '.ttf', function (err, font) {
if (err) {
dfd.reject('Font is not loaded');
console.log('Could not load font: ' + err);
} else {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var tmp_path = font.getPath(text, 100, 100, size);
tmp_path.draw(ctx); // Draw path on the canvas
var ascent = 0;
var descent = 0;
var width = 0;
var scale = 1 / font.unitsPerEm * size;
var glyphs = font.stringToGlyphs(text_string);
for (var i = 0; i < glyphs.length; i++) {
var glyph = glyphs[i];
if (glyph.advanceWidth) {
width += glyph.advanceWidth * scale;
}
if (i < glyphs.length - 1) {
var kerningValue = font.getKerningValue(glyph, glyphs[i + 1]);
width += kerningValue * scale;
}
ascent = Math.max(ascent, glyph.yMax);
descent = Math.min(descent, glyph.yMin);
}
return dfd.resolve({
width: width,
height: ascent * scale,
actualBoundingBoxDescent: descent * scale,
fontBoundingBoxAscent: font.ascender * scale,
fontBoundingBoxDescent: font.descender * scale
});
}
});
return dfd.promise();
},
then use this function to get text dimensions:
$.when(measureText("ABCD", "arial", 48)).done(function(res) {
var height = res.height,
width = res.width;
...
});
I created a renderer2D so the user can click and pick the centre of a lesion. I want to show the user where he clicked. Currently my idea is to freeze the renderer (so the slice will be the same and the zoom too) and then use the canvas to draw a circle.
Here is my code:
centerpick2D = new X.renderer2D();
centerpick2D.container = 'pick_center_segment';
centerpick2D.orientation = 'Z';
centerpick2D.init();
centerpick2D.add(volumeT1DCM);
centerpick2D.render();
centerpick2D.interactor.onMouseDown = function(){
tumorCenter=centerpick2D.xy2ijk(centerpick2D.interactor.mousePosition[0],centerpick2D.interactor.mousePosition[1]);
centerpick2D.interactor.config.MOUSEWHEEL_ENABLED = false;
centerpick2D.interactor.config.MOUSECLICKS_ENABLED = false;
$('canvas').attr('id', 'xtkCanvas');
var myCanvas = document.getElementById("xtkCanvas");
var ctx=myCanvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(centerpick2D.interactor.mousePosition[0],centerpick2D.interactor.mousePosition[1],20,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
};
I have two problems:
The MOUSEWHEEL_ENABLED=false and MOUSECLICKS_ENABLED = false do not work. I tried adding a centerpick2D.init() which works but add a second canvas on top of the previous one.
My circle does not appear anywhere.
Any help would be greatly appreciated. :-D
Sorry took me a while to get this uploaded. Here's a quick overview of how I am copying the XTK canvas' contents into my own canvas and then do my own custom drawing on top of it. The actual code for my project is all over the place, so am just pasting formatted snippets here. Again there's a definite drawback in terms of performance here (due to the copying of pixels), so I think it would be better to introduce all this into the XTK Code in the first place and do all the drawing in one Canvas element.
// initialise animation loop with requestAnimationFrame
startDraw:function(){
var _this = this;
var time = new Date().getTime();
function draw() {
//update time
var now = new Date().getTime();
//only draw the frame if 25 milliseconds have passed!
if(now > (time + 25)){
// call drawing function here
drawFrame();
time = now;
}
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
};
//...
// actual drawing function, for each frame copy the pixel contents from a XTK canvas
// into custom canvas and do custom drawing on top of it, so drawing is actually at each
// frame
drawFrame:function(){
//...
// this.ctx is the context of my own custom canvas element
// I use drawImage() function to copy the pixels from this.srcCanvasA
// this.srcCanvasA is a predefined XTKCanvas
this.ctx.drawImage(this.srcCanvas, 1, 1)
// custom func to draw on top of this same canvas (ie. this.ctx) with standard
// HTML Canvas functionality, so this is where you could draw your own circle based
// on the user mouse coords
this.drawAnnotation();
//...
}
Let me know if you have any more questions. The full code is available here:
https://github.com/davidbasalla/IndividualProject
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() {}