Text editing in KonvaJS with zoom (scale) applied - konvajs

I'm trying to implement the complex demo for text edition on the official docs.
It works fine but I have a "zoom" functionality that applies scale to the stage and when the textarea is created the positioning and size is wrong.
Example
Is there a workarond to fix this issue?
I know that is something related to stage transform. I'm trying to apply this approach without success.
Thanks.

You just need to take scale into calculation when you apply styles of textarea:
textarea.style.width = textNode.width() * textNode.getAbsoluteScale().x + 'px';
https://jsbin.com/jufosoqeve/1/edit?html,js,output

Related

PDFNet Resize annot Swift

Have anyone worked using PDFNet where the annot needs to be resized?
For simplicity, currently i set the text of the annot using
annot.setContents(text)
annot.refreshAppearance()
pdfView.update()
However, if the text is too long where it exceeds the annot's width, it cant be resized and the text will be trimmed as the annot's width isnt wide enough. I checked the documentation and it seems there is a resize function, however the parameter it is taking isn't clear. Anyone with knowledge on this, thanks in advance
How are you creating the (free-text) annotations? If you are using a PTToolManager and creating the annotations with PTFreeTextCreate tool class, then you can enable auto-resize for free-text annotations with toolManager.isAutoResizeFreeTextEnabled = true
Using the PTDocumentController class for viewing and annotating documents is highly recommended if possible, otherwise a PTPDFViewCtrl and PTToolManager should be used.
The PTAnnot.resize() function is used to set the PDF page rect of the annotation, preserving (ie. scaling) the annotation's appearance to fill its new rect.
Auto-resizing a free-text annotation without a PTToolManager would require calculating (yourself) the size of the text. The PTToolManager API approach is recommended.

PaintCode, How to add a frame around a portion of a vector and have it dynamically resize?

I've imported a vector layer from a psd into paint code v1, I'm trying to create a background image and make it universal.
I can't seem to add a frame around the vector, to complicate matters, I only need a portion, the center, of the layer. (The design is based around a circle, it has lines drawn towards the center of the circle.)
I can’t seem to add a frame to dynamically resize the part I need.
I found this http://www.raywenderlich.com/36341/paintcode-tutorial-dynamic-buttons the part about frame ans groups doesn't help me....
When I add a click frame and drag it around the area I need, it's at the same level as the vector layer. I've also tried adding a group around both, but that doesn't seem to obey the frame size either.
I’ve looked through the tutorials and googled adding a frame, but I can’t seem to achieve what I need.
EDIT
A frame is supposed to be at the same level as the vectors you're working with.
All you do then is set the resize rules of your vectors. There is a little rectangle in the frame's parameters interface with straight arrows and springs that you can modify to fit your wishes.
I think I also remember a checkbox setting to resize only what's inside the frame.
Now I haven't used PaintCode for a while, but if this doesn't help you, there probably is a problem with your vector layer.
I don't know if this information helps.
But if you resizing doesn't work as you expected. Look carefully at the transformation box (the one with the springs attached). When you have put a frame around your object. The middle dot in this box should be blue instead of green. if t's green, you may have a problem with the originating point of your objects and then the resizing may not work as you expected.

Control image size with slider

I want to use a UISlider to control the size of an image. As you slide the slider one way the UIImage above should grow and as you slide the other way it should shrink. The ratio should stay the same. The math should be something like slider value = width, and height = (height/width ratio) * slider value. The way I think this could be done would be by making a variable and setting that variable to the image size and then making that variable = the slider value but I am not experienced with this sort of programming and do not know where to start. I found this question but I am not sure how to implement its code. Any point in the right direction, even just a conceptual explanation so I know how to write the code, is appreciated. NOTE- I did find this answer on changing the size, so now I just need to figure out how to link that to a slider.
EDIT- Now that the code is done and working, if anyone want s to see it in action my repo is here.
I know you specified UIImage in your question, but if you're trying to adjust the size of an image displayed on screen, you would do this by modifying the image view that contains the image. In this case you would want to modify the transform property of the image view.
Start by setting the sliders min value to 0.5 and max to 1.5, and linking its value changed control event to an IBAction set up to look something like this. It will expand and contract an image view from the image view's center.
- (IBAction)sliderValueChanged:(UISlider *)sender
{
[_myImageView setTransform:CGAffineTransformMakeScale(sender.value, sender.value)];
}
Additionally, the first post your linked to if for Microsoft WPF and the code couldn't be directly converted without knowing the both relevant API's. Then the second link you provided does show how to directly change the resolution of a UIImage.
You could do something similar to what I've done above with the image view, as in reading the sliders value and formulaically setting the image's size, but I don't recommend that. The slider value changed method will be called very frequently, and may cause performance issues doing this. If you provide more details on what you're trying to do, I may be able to offer different suggestions.

Pattern fill that "follows" the path?

On iOS, I'm using core-plot to draw a line graph. I want the line to be bordered top and bottom with a solid color and a different color in the middle, a striping effect. This cannot be done using CPTLineStyle, so I created a custom line style that uses CGContextSetStrokePattern to draw the line.
I thought I achieve the desired effect by creating a striped image and using it as the stroke pattern. This works, but the image orientation does not follow the direction of the path. The stripes are always horizontal even if the direction of the path is 45 degrees.
How can I tell Quartz auto rotate the pattern fill such that it follows the vector direction of the graph segment? Or alternatively, how can I get core-plot to do this for me?
We recently added the lineGradient property to CPTLineStyle that gives you a very flexible way to do this. See the "Gradient Scatter Plot" demo in the Plot Gallery example app.
Note that this change was added after the 1.3 release and is not part of a downloadable release yet. You will need to pull the latest code with Mercurial to get the change or wait for the next release.
The best solution I've found is to use two plots. The first with the wider line style the second with the narrower one. That achieves the desired effect.

jquery Image slider without define width?

I have used the coin slider.But the coin slider is restricted by the width.I need to run my application in various screen size like 1280*768,800*600.is there any image slider in jquery without restrict width of image?Please help me.
Thanks in advance.
Most image sliders are designed for being placed within a container of a certain width, so that they fit within a specific slot in a layout. Given that the size of the screen/window(you don't specify) is irrelevant to that, it seems like what you're looking for is a gallery that adapts to the size of the entire window, rather than fit within a specific size.
You should probably widen your search to JS galleries in general, which might have that option or even function that way in the first place. As initial suggestions, have a look at the full-screen example for Galleria, or maybe the Supersized plugin

Resources