Mixing
How to blend multiple UIView in iOS?
I want to blend multiple UIView in such a way that it can move, rotate and resize smoothly.
I already achieved this with the code below but it's not as smooth as other application like PicsArt & SnapSeed.
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
UIImage *viewImage = [self captureView:self.superview withFrame:self.frame];
[viewImage drawInRect:rect];
[self.imageToBlend drawInRect:rect blendMode:self.blendMode alpha:self.alphaBlend];
// Other code....
}
ios objective-c uiview blend
edited Jan 2 at 8:29
Ketan Odedra
13616
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
add a comment |
I want to blend multiple UIView in such a way that it can move, rotate and resize smoothly.
I already achieved this with the code below but it's not as smooth as other application like PicsArt & SnapSeed.
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
UIImage *viewImage = [self captureView:self.superview withFrame:self.frame];
[viewImage drawInRect:rect];
[self.imageToBlend drawInRect:rect blendMode:self.blendMode alpha:self.alphaBlend];
// Other code....
}
ios objective-c uiview blend
edited Jan 2 at 8:29
Ketan Odedra
13616
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
I think I'm not getting your question, why aren't you using a CGAffineTransform? If you apply rotation, translation, on the hosting view it will automatically blend subviews in it and Core Animation will hardware accelerate everything
– Andrea
Jan 22 at 14:29
add a comment |
I want to blend multiple UIView in such a way that it can move, rotate and resize smoothly.
I already achieved this with the code below but it's not as smooth as other application like PicsArt & SnapSeed.
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
UIImage *viewImage = [self captureView:self.superview withFrame:self.frame];
[viewImage drawInRect:rect];
[self.imageToBlend drawInRect:rect blendMode:self.blendMode alpha:self.alphaBlend];
// Other code....
}
ios objective-c uiview blend
edited Jan 2 at 8:29
Ketan Odedra
13616
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
I want to blend multiple UIView in such a way that it can move, rotate and resize smoothly.
I already achieved this with the code below but it's not as smooth as other application like PicsArt & SnapSeed.
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
UIImage *viewImage = [self captureView:self.superview withFrame:self.frame];
[viewImage drawInRect:rect];
[self.imageToBlend drawInRect:rect blendMode:self.blendMode alpha:self.alphaBlend];
// Other code....
}
ios objective-c uiview blend
ios objective-c uiview blend
edited Jan 2 at 8:29
Ketan Odedra
13616
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
edited Jan 2 at 8:29
Ketan Odedra
13616
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
edited Jan 2 at 8:29
Ketan Odedra
13616
edited Jan 2 at 8:29
Ketan Odedra
13616
edited Jan 2 at 8:29
Ketan Odedra
13616
13616
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
asked Jan 2 at 6:54
iCoderz DevelopersiCoderz Developers
180213
180213
I think I'm not getting your question, why aren't you using a CGAffineTransform? If you apply rotation, translation, on the hosting view it will automatically blend subviews in it and Core Animation will hardware accelerate everything
– Andrea
Jan 22 at 14:29
add a comment |
I think I'm not getting your question, why aren't you using a CGAffineTransform? If you apply rotation, translation, on the hosting view it will automatically blend subviews in it and Core Animation will hardware accelerate everything
– Andrea
Jan 22 at 14:29
I think I'm not getting your question, why aren't you using a CGAffineTransform? If you apply rotation, translation, on the hosting view it will automatically blend subviews in it and Core Animation will hardware accelerate everything
– Andrea
Jan 22 at 14:29
I think I'm not getting your question, why aren't you using a CGAffineTransform? If you apply rotation, translation, on the hosting view it will automatically blend subviews in it and Core Animation will hardware accelerate everything
– Andrea
Jan 22 at 14:29
add a comment |
2 Answers
2
active
oldest
votes
You can't blend views this way; they have separate layer hierarchies that are resolved independently. Move the gradient and text on CALayer objects and blend those (or draw them by hand inside the same view). For example:
class MyView: UIView {
let gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor,
UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
return gradientLayer
}()
let textLayer: CATextLayer = {
let textLayer = CATextLayer()
let astring = NSAttributedString(string: "Text Example",
attributes: [.font: UIFont(name: "MarkerFelt-Wide", size: 60)!])
textLayer.string = astring
textLayer.alignmentMode = kCAAlignmentCenter
textLayer.bounds = astring.boundingRect(with: CGSize(width: .max, height: .max),
options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil)
return textLayer
}()
override func draw(_ rect: CGRect) {
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.bounds = bounds
gradientLayer.render(in: context)
context.saveGState()
context.setBlendMode(.softLight)
context.translateBy(x: center.x - textLayer.bounds.width / 2,
y: center.y - textLayer.bounds.height / 2)
textLayer.position = center
textLayer.render(in: context)
context.restoreGState()
}
}
}
you won't get a proper answer by searching try your own logic.
By using context, you can use a gesture and all other.
answered Jan 22 at 13:34
vikiviki
414
add a comment |
Capture and blend each time when drawRect: sounds too heavy.
It seems that you want to blend some image to its backend with various blend modes and alpha.
In that case, you'd better to blend entire view, and use view.layer.mask to show only masked area of the blend result.
So you can just move, rotate and resize the view.layer.mask, and no capturing or blending is needed. It should be much faster.
Something like this.
class MyView: UIImageView {
var backendImage: UIImage?
var blendImage: UIImage?
var blendMode: CGBlendMode = .normal
var alphaBlend: Float = 0.5
func setup(backend: UIView) {
self.backendImage = self.captureView(backend)
self.image = self.createBlendImage()
self.layer.mask = self.createMask()
}
func captureView(view: UIView) -> UIImage {
// capture view
}
func createBlendImage() -> UIImage {
// prepare ImageContext, draw two image, get image, and so on...
}
func createMask() -> CALayer {
let mask = CAShapeLayer()
// setup the shape of mask
}
func moveMask(origin: CGPoint, scale: Float, rotation: Float) {
// change mask
self.layer.mask.frame = ...
self.layer.mask.transform = ...
}
}
answered Jan 28 at 8:25
takataka
1,0975
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002381%2fhow-to-blend-multiple-uiview-in-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can't blend views this way; they have separate layer hierarchies that are resolved independently. Move the gradient and text on CALayer objects and blend those (or draw them by hand inside the same view). For example:
class MyView: UIView {
let gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor,
UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
return gradientLayer
}()
let textLayer: CATextLayer = {
let textLayer = CATextLayer()
let astring = NSAttributedString(string: "Text Example",
attributes: [.font: UIFont(name: "MarkerFelt-Wide", size: 60)!])
textLayer.string = astring
textLayer.alignmentMode = kCAAlignmentCenter
textLayer.bounds = astring.boundingRect(with: CGSize(width: .max, height: .max),
options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil)
return textLayer
}()
override func draw(_ rect: CGRect) {
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.bounds = bounds
gradientLayer.render(in: context)
context.saveGState()
context.setBlendMode(.softLight)
context.translateBy(x: center.x - textLayer.bounds.width / 2,
y: center.y - textLayer.bounds.height / 2)
textLayer.position = center
textLayer.render(in: context)
context.restoreGState()
}
}
}
you won't get a proper answer by searching try your own logic.
By using context, you can use a gesture and all other.
answered Jan 22 at 13:34
vikiviki
414
add a comment |
You can't blend views this way; they have separate layer hierarchies that are resolved independently. Move the gradient and text on CALayer objects and blend those (or draw them by hand inside the same view). For example:
class MyView: UIView {
let gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor,
UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
return gradientLayer
}()
let textLayer: CATextLayer = {
let textLayer = CATextLayer()
let astring = NSAttributedString(string: "Text Example",
attributes: [.font: UIFont(name: "MarkerFelt-Wide", size: 60)!])
textLayer.string = astring
textLayer.alignmentMode = kCAAlignmentCenter
textLayer.bounds = astring.boundingRect(with: CGSize(width: .max, height: .max),
options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil)
return textLayer
}()
override func draw(_ rect: CGRect) {
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.bounds = bounds
gradientLayer.render(in: context)
context.saveGState()
context.setBlendMode(.softLight)
context.translateBy(x: center.x - textLayer.bounds.width / 2,
y: center.y - textLayer.bounds.height / 2)
textLayer.position = center
textLayer.render(in: context)
context.restoreGState()
}
}
}
you won't get a proper answer by searching try your own logic.
By using context, you can use a gesture and all other.
answered Jan 22 at 13:34
vikiviki
414
add a comment |
You can't blend views this way; they have separate layer hierarchies that are resolved independently. Move the gradient and text on CALayer objects and blend those (or draw them by hand inside the same view). For example:
class MyView: UIView {
let gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor,
UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
return gradientLayer
}()
let textLayer: CATextLayer = {
let textLayer = CATextLayer()
let astring = NSAttributedString(string: "Text Example",
attributes: [.font: UIFont(name: "MarkerFelt-Wide", size: 60)!])
textLayer.string = astring
textLayer.alignmentMode = kCAAlignmentCenter
textLayer.bounds = astring.boundingRect(with: CGSize(width: .max, height: .max),
options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil)
return textLayer
}()
override func draw(_ rect: CGRect) {
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.bounds = bounds
gradientLayer.render(in: context)
context.saveGState()
context.setBlendMode(.softLight)
context.translateBy(x: center.x - textLayer.bounds.width / 2,
y: center.y - textLayer.bounds.height / 2)
textLayer.position = center
textLayer.render(in: context)
context.restoreGState()
}
}
}
you won't get a proper answer by searching try your own logic.
By using context, you can use a gesture and all other.
answered Jan 22 at 13:34
vikiviki
414
You can't blend views this way; they have separate layer hierarchies that are resolved independently. Move the gradient and text on CALayer objects and blend those (or draw them by hand inside the same view). For example:
class MyView: UIView {
let gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor,
UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
return gradientLayer
}()
let textLayer: CATextLayer = {
let textLayer = CATextLayer()
let astring = NSAttributedString(string: "Text Example",
attributes: [.font: UIFont(name: "MarkerFelt-Wide", size: 60)!])
textLayer.string = astring
textLayer.alignmentMode = kCAAlignmentCenter
textLayer.bounds = astring.boundingRect(with: CGSize(width: .max, height: .max),
options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil)
return textLayer
}()
override func draw(_ rect: CGRect) {
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.bounds = bounds
gradientLayer.render(in: context)
context.saveGState()
context.setBlendMode(.softLight)
context.translateBy(x: center.x - textLayer.bounds.width / 2,
y: center.y - textLayer.bounds.height / 2)
textLayer.position = center
textLayer.render(in: context)
context.restoreGState()
}
}
}
you won't get a proper answer by searching try your own logic.
By using context, you can use a gesture and all other.
answered Jan 22 at 13:34
vikiviki
414
answered Jan 22 at 13:34
vikiviki
414
answered Jan 22 at 13:34
vikiviki
414
answered Jan 22 at 13:34
vikiviki
414
414
add a comment |
add a comment |
Capture and blend each time when drawRect: sounds too heavy.
It seems that you want to blend some image to its backend with various blend modes and alpha.
In that case, you'd better to blend entire view, and use view.layer.mask to show only masked area of the blend result.
So you can just move, rotate and resize the view.layer.mask, and no capturing or blending is needed. It should be much faster.
Something like this.
class MyView: UIImageView {
var backendImage: UIImage?
var blendImage: UIImage?
var blendMode: CGBlendMode = .normal
var alphaBlend: Float = 0.5
func setup(backend: UIView) {
self.backendImage = self.captureView(backend)
self.image = self.createBlendImage()
self.layer.mask = self.createMask()
}
func captureView(view: UIView) -> UIImage {
// capture view
}
func createBlendImage() -> UIImage {
// prepare ImageContext, draw two image, get image, and so on...
}
func createMask() -> CALayer {
let mask = CAShapeLayer()
// setup the shape of mask
}
func moveMask(origin: CGPoint, scale: Float, rotation: Float) {
// change mask
self.layer.mask.frame = ...
self.layer.mask.transform = ...
}
}
answered Jan 28 at 8:25
takataka
1,0975
add a comment |
Capture and blend each time when drawRect: sounds too heavy.
It seems that you want to blend some image to its backend with various blend modes and alpha.
In that case, you'd better to blend entire view, and use view.layer.mask to show only masked area of the blend result.
So you can just move, rotate and resize the view.layer.mask, and no capturing or blending is needed. It should be much faster.
Something like this.
class MyView: UIImageView {
var backendImage: UIImage?
var blendImage: UIImage?
var blendMode: CGBlendMode = .normal
var alphaBlend: Float = 0.5
func setup(backend: UIView) {
self.backendImage = self.captureView(backend)
self.image = self.createBlendImage()
self.layer.mask = self.createMask()
}
func captureView(view: UIView) -> UIImage {
// capture view
}
func createBlendImage() -> UIImage {
// prepare ImageContext, draw two image, get image, and so on...
}
func createMask() -> CALayer {
let mask = CAShapeLayer()
// setup the shape of mask
}
func moveMask(origin: CGPoint, scale: Float, rotation: Float) {
// change mask
self.layer.mask.frame = ...
self.layer.mask.transform = ...
}
}
answered Jan 28 at 8:25
takataka
1,0975
add a comment |
Capture and blend each time when drawRect: sounds too heavy.
It seems that you want to blend some image to its backend with various blend modes and alpha.
In that case, you'd better to blend entire view, and use view.layer.mask to show only masked area of the blend result.
So you can just move, rotate and resize the view.layer.mask, and no capturing or blending is needed. It should be much faster.
Something like this.
class MyView: UIImageView {
var backendImage: UIImage?
var blendImage: UIImage?
var blendMode: CGBlendMode = .normal
var alphaBlend: Float = 0.5
func setup(backend: UIView) {
self.backendImage = self.captureView(backend)
self.image = self.createBlendImage()
self.layer.mask = self.createMask()
}
func captureView(view: UIView) -> UIImage {
// capture view
}
func createBlendImage() -> UIImage {
// prepare ImageContext, draw two image, get image, and so on...
}
func createMask() -> CALayer {
let mask = CAShapeLayer()
// setup the shape of mask
}
func moveMask(origin: CGPoint, scale: Float, rotation: Float) {
// change mask
self.layer.mask.frame = ...
self.layer.mask.transform = ...
}
}
answered Jan 28 at 8:25
takataka
1,0975
Capture and blend each time when drawRect: sounds too heavy.
It seems that you want to blend some image to its backend with various blend modes and alpha.
In that case, you'd better to blend entire view, and use view.layer.mask to show only masked area of the blend result.
So you can just move, rotate and resize the view.layer.mask, and no capturing or blending is needed. It should be much faster.
Something like this.
class MyView: UIImageView {
var backendImage: UIImage?
var blendImage: UIImage?
var blendMode: CGBlendMode = .normal
var alphaBlend: Float = 0.5
func setup(backend: UIView) {
self.backendImage = self.captureView(backend)
self.image = self.createBlendImage()
self.layer.mask = self.createMask()
}
func captureView(view: UIView) -> UIImage {
// capture view
}
func createBlendImage() -> UIImage {
// prepare ImageContext, draw two image, get image, and so on...
}
func createMask() -> CALayer {
let mask = CAShapeLayer()
// setup the shape of mask
}
func moveMask(origin: CGPoint, scale: Float, rotation: Float) {
// change mask
self.layer.mask.frame = ...
self.layer.mask.transform = ...
}
}
answered Jan 28 at 8:25
takataka
1,0975
answered Jan 28 at 8:25
takataka
1,0975
answered Jan 28 at 8:25
takataka
1,0975
answered Jan 28 at 8:25
takataka
1,0975
1,0975
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002381%2fhow-to-blend-multiple-uiview-in-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think I'm not getting your question, why aren't you using a CGAffineTransform? If you apply rotation, translation, on the hosting view it will automatically blend subviews in it and Core Animation will hardware accelerate everything
– Andrea
Jan 22 at 14:29