I am trying to implement multi-select feature using react-konva. I found a multi-select sample code where I found transformer getClientRect() method, but in the latest version and also in the documentation that method does not exist. I have done some changes in the aforementioned sample code which actually relies on transformer getClientRect() method and it is working fine there but with the latest version that method is returning an object with all fields of value 0.
Is there any other way to get the size of the transformer?
Thanks.
After digging into the Konva.Transformer code, I figured out getX(), getY(), getWidth() and getHeight() methods. One can use these methods and create own getClientRect() method as follows,
function getTransformerClientRect(
transformer: Konva.Transformer | null
): IRect {
if (!transformer) {
return {
x: 0,
y: 0,
width: 0,
height: 0,
};
}
return {
x: transformer.getX(),
y: transformer.getY(),
width: transformer.getWidth(),
height: transformer.getHeight(),
};
}
Related
I am trying to create custom share a circle and BIN inside that circle to use as button.
but context.circle is not working in documention they mentioned, rect, circle, text.. we can use with custom shape.
Please letme know what is the issue, is it bug or something i am missing.
var rect = new Konva.Shape({
x: 10,
y: 20,
fill: '#00D2FF',
radius: 10,
sceneFunc: function (context, shape) {
context.beginPath();
context.circle(0, 0, 5);
context.fillStrokeShape(shape);
},
});
context argument is a wrapper around 2D native canvas context https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.
You should use its methods to make drawings. In your case you may need context.arc: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
Apple broke Path in Xcode 11 beta 5:
A known issue in Xcode 11 beta 5 causes your app to crash when you use the Path structure.
So I'm trying to work around this using CGMutablePath:
var body: some View {
GeometryReader { geometry in
let path = CGMutablePath()
path.addRect(CGRect(x: 0, y: 0, width: 100, height: 100))
return Path(path)
}
}
This draws a square.
When I try to change the color as follows:
var body: some View {
GeometryReader { geometry in
let path = CGMutablePath()
path.addRect(CGRect(x: 0, y: 0, width: 100, height: 100))
return Path(path).fill(Color.purple)
}
}
I get:
Cannot convert return expression of type 'GeometryReader<_>' to return type 'some View'
Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type
I'm not sure what return type to use? I tried Path but evidently fill doesn't return another Path.
I tried View but I get:
Protocol 'View' can only be used as a generic constraint because it has Self or associated type requirements
I tried some View but it didn't seem to even parse.
The iOS 13 beta 7 release notes say it's fixed in Xcode 11 beta 6, so we just have to wait for that to be released. Hopefully tomorrow!
From the release notes :
Resolved Issues
Using the Path structure no longer causes your app to crash if you’re using the SDKs included in Xcode 11 beta 6 and later. (53523206)
It still will crash... Path is too broken! But if you are curious how you can get to compile successfully, you can do something like this:
struct MyShape: View {
#State private var flag = false
var body: some View {
return GeometryReader { (geometry) -> AnyView in
let path = CGMutablePath()
path.addRect(CGRect(x: 0, y: 0, width: 100, height: 100))
return AnyView(Path(path).fill(Color.purple))
}
}
}
It will crash on Path(path)
I am loading some HTML, Java script code into my iOS application. Its working fine, but, according to device height, I should have to change the animation size (width), I tried following code, but, I am very new to javascript calling into iOS.
my html page code of java script is
var $ios9 = document.getElementById('container-ios9');
var SW9 = new Wave9({
width: 800,
height: 40,
container: $ios9,
});
</script>
and I am calling into native code as
if (self.view.frame.size.width <= 400) {
[_animationWebView stringByEvaluatingJavaScriptFromString:#"document.getElementById('container-ios9').width = 500"];
}
else {
[_animationWebView stringByEvaluatingJavaScriptFromString:#"document.getElementById('container-ios9').width = 700"];
}
The above code is not changing the width, So,
Can anyone suggest me, how to fix this. Thanks!
After lot of R & D, I fixed the issue by myself. I am posting this answer here, It will help someone future.
In HTML file, Java script code,
if (window.screen.width <= 400) {
var $ios9 = document.getElementById('container-ios9');
var SW9 = new Wave9({
width: 800,
height: 40,
container: $ios9,
});
} else {
//other devices
</script>
The code is not recognize setting the width command:
hi.graphics.strokeColor(Color.Red, width: 5);
According to the stageXL api the width attribute is an optional positional attribute. So you don't have to use the width: prefix in the method call :
hi.graphics.strokeColor(Color.Red, 5);
See functions optional parameters for more informations.
From stageXL api your code should be
hi.graphics.strokeColor(Color.Red, width = 5);
= not :
What I want to do is track the (top, left, width, height, zIndex) style attributes. But since the element that holds these styles doesn't exist until after third party code gets pulled in, i can't do it the normal way.
Here's what I've got thus far:
my.Module = function (module) {
return {
top: ko.observable(200);,
left: ko.observable(100);,
width: ko.observable(100);,
height: ko.observable(100);,
zIndex: ko.observable(0);,
};
};
This would be the normal binding context:
<div data-bind="style:{width:width, top:top, left:left, height:height, zindex:zIndex}"></div>
But the third party stuff ends up wrapping the div i pass it within another, and this is something I cannot change. So instead I've started creating a custom bindinghandler:
ko.bindingHandlers.Window = {
init: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
//Do third party creation stuff here...
ko.applyBindingsToNode(elemToActuallyWatch, {
style: {
width: value.width() + 'px',
height: value.height() + 'px',
top: value.top() + 'px',
left: value.left() + 'px',
zIndex: value.zIndex()
}
});
},
Now this applies the above styles to the appropriate div, but i still need the above values to change when both the data changes and when the element changes.
I feel like the 'px' that i have to tack on the ends shouldn't be needed but that was the only way i could get them to apply.
Is there a way from this point on, that lets say I'm using jqueryUI draggable and resizable, and a user moves/resizes the element that the values will automatically update the viewmodel data? Of course a non jquery specific answer would be best.
style is a one-way binding, from model to view. It won't update the model from the view. You'll probably need to use the resize option and update the model from there.