I have an Image that is masked by an image asset. I'd like to apply a dashed border to the Image so that the dashed border shape follows the mask whatever it is.
Image(uiImage: self.helper.loadedImage!)
.resizable()
.scaledToFill()
.foregroundColor(Color.clear)
.background(Color.clear)
.frame(width: 200, height: 200, alignment: .center)
.clipped()
.mask(Image(uiImage: self.helper.loadedMaskImage!)
.resizable()
.frame(width: 200, height: 200, alignment: .center))
This image is rendered correctly. If loadedMaskImage is a circle for example, i see the original image in a circle shape. Now i'd like to show a circle dashed border on this image. But I don't want to use any specific shape, because the loadedMaskImage can be anything at runtime.
Is this possible without diving back into UIKit UIView?
EDIT:
This is how i can mask the view. In this case i'm using a circle image as a mask and the result is correct. Now on top of this i'd like to have a dashed border that has the same shape of that circle.
The dashed border can be achieved by using a dashed stroke of color over the image using a ZStack
Circle()
.stroke(Color.blue, style: StrokeStyle(lineWidth:5 , lineCap: .round, dash:[10, 5]))
.frame(width: 200, height: 200)
The dash argument is an array where here it means for every 10 length of showing the border there should be 5 length of no border which appears as dashed border,
I set the width and height of the frame exactly equal to your image's width and height so that it looks as though the circle is just bordering your image
You can set the first property to anything like Color.black.opacity(0.4) or even a LinearGradient if you wish so...
Related
I have a stencil shape of type basic.Image which is showed in Stencil without a label as in the following screenshot:
Is there any way I can add a label which will be displayed at the bottom of this shape in the Stencil?
The full code is the following:
new joint.shapes.basic.Image({
attrs: {
image: { width: 50, height: 50, 'xlink:href': 'data:image/png;base64,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' },
text: { text: 'image', 'font-size': 9, display: '', stroke: '#000000', 'stroke-width': 0 }
}
})
Thanks to Rappid/ jointJS support, I solved my problem by disabling a CSS rule which was responsible for hiding the label of any Stencil shape of type basic.Image this way:
.stencil .elements .element.basic.Image text
This label is now visible under this shape at Stencil and it is disappeared when adding this shape to the graph, as wanted.
I'm trying to add transparency to my CanvasJS background.
CanvasJS uses backgroundColor in order to choose the color of the background of the canvas.
I tried writing "None" instead of a color code but it's giving me a black background.
Also it would be nice to have the ability to choose different opacities for the background.
To set transparent background you can set backgroundColor: "transparent". And if you like to give transparency to any color you can use rgba color coding, for example: backgroundColor: "rgba(225,150,150,0.5)".
You can set background-color: transparent; and it will show no color.
Opacity can be set by using rgba. For white 50%, it would be background-color: rgba(255, 255, 255, .5);
I've never used CanvasJs and don't know how that script will effect things but in basic CSS these will do the trick.
I found the answer eventually. You can just have the backgroundColor with en empty string (backgroundColor:'') and it will omit the background color and leave it transparent.
I would still like to know if it's possible to add transparency to a color, so if anyone knows, please comment.
According to Canvasjs document you will be able to set background color, use rgba(0, 0, 0, 0) for transparent (of course you can change the inside values to fix your purpose):
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Title with Background Color",
padding: 5,
backgroundColor: rgba(0, 0, 0, 0),
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
]
}
]
});
chart.render();
}
Hope this help :)
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
Full demo http://jsfiddle.net/canvasjs/7b0xdcwv/
Goal: Draw a fixed grid on the screen to use with jQuery's draggable snap option as part of a form designer. Allow user to zoom in and out while still maintaining the 25x25 px grid.
Problem: The grid is drawn with a 1px width DIV for vertical lines and a 1px height DIV for horizontal lines. At normal zoom in Chrome the DIVs display fine, however, at varying zoom levels some of the DIVs will not display at all. The problem was noted with 90% zoom and 75% zoom but also occurred in others. If zooming in past 100% it seems fine. I couldn't re-produce the problem in IE or MS Edge.
What I know: I looked around for a while for a solution. Based on that research and inspecting the computed styling I believe the problem is that Chrome is calculating a new width/height when zoomed and if the calculation result is less than 1 it will not display as 1px is the smallest unit the browser will display. I toyed around with adding a border but that seems to throw off my positioning.
Here is my javaScript:
$(document).ready(function(){
var i,
sel = $('#myDIV'),
size = 25,
height = sel.height(),
width = sel.width(),
ratioW = Math.floor(width / size),
ratioH = Math.floor(height / size);
for (i = 0; i <= ratioW; i++) { // vertical grid lines
$('<div />').css({
'top': 0,
'left': i * size,
'width': 1,
'height': height
})
.addClass('gridlines')
.appendTo(sel);
}
for (i = 0; i <= ratioH; i++) { // horizontal grid lines
$('<div />').css({
'top': i * size,
'left': 0,
'width': width,
'height': 1
})
.addClass('gridlines')
.appendTo(sel);
}
$('.gridlines').show();
})
Here is my CSS:
.gridlines {
display: none;
position:absolute;
background-color:#ccc;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
And finally a jsFiddle to demonstrate the issue. In my actual scenario I can see the problem at 90% zoom but in the jsFiddle I don't see the problem until 75% zoom.
https://jsfiddle.net/r5xjsf6f/
UPDATE:
So based on a comment suggesting that I detect the zoom and modify the css accordingly I started digging into that. I found that I could analyze the computed style and if it was less than 1px I could increase the inline style to 2px and then it would show. I don't really like this but I wanted to try something. The odd thing is in testing I found that at some zoom levels the computed style was 1px and they still didn't show. Any ideas on that part of it or a better solution?
Here is the code I added:
if(!!window.chrome){
$(".ghorizontal").each(function(){
if($(this).height()<1){
$(this).css("height","2px");
}
})
$(".gvertical").each(function(){
if($(this).width()<1){
$(this).css("width","2px");
}
})
}
Here is an updated jsFiddle:
https://jsfiddle.net/r5xjsf6f/1/
UPDATE:
Since I wasn't able to find a solution for this we ended up just changing our grid lines width/height to 2px instead of 1px. This seems to allow the lines to display correctly until about 33% zoom level. Before it was breaking at more realistic zoom levels. This isn't a full solution but is more in the realm of reasonability for our application. I welcome better solutions if they are out there but we are gonna roll into production with this for now.
I am actually trying to accomplish something similar with the same code and I ran into the same exact problem. I managed to fix the issue by setting the width and height to zero and putting a border-left on the vertical lines and a border bottom on the horizontal lines like so:
$('<div />').css({
'top': 0,
'left': i * size,
'width': 0,
'border-left': '1px solid #ccc',
'height': height
})
.addClass('gridlines')
.appendTo(sel);
}
for (i = 0; i <= ratioH; i++) { // horizontal grid lines
$('<div />').css({
'top': i * size,
'left': 0,
'width': width,
'border-top': '1px solid #ccc',
'height': 0
})
.addClass('gridlines')
.appendTo(sel);
}
Here is an updated version of your fiddle
I have added a textareafield to the panel, which by default is white as background. But I wanted to hide the white color and give it the lightblue color, so that it falls in with the panel.As you can see on the image, the top (first line) of the textareafield stays white. Does anyone has an idea of why, and how to solve this?
My code to generate the textareafield is:
xtype: 'textareafield',
readOnly: true,
height: 150,
fieldStyle: 'background-color: #DFE9F6',
value: warning,
id: 'textareaField'
There is still a background image that you will need to remove, too. Please try
xtype: 'textareafield',
readOnly: true,
height: 150,
fieldStyle: 'background-color: #DFE9F6; background-image: none;',
value: warning,
id: 'textareaField'
I'm creating a web app where I allow users to zoom certain 100x100px background images.
When they double tap the image, I scale the image to twice its size (-webkit-transform: scale( 2 )).
When the transition is done, I swap the 100x100px image with a larger 200x200px image. For some reason, the image is very blurry.
So I tried to use an img tag instead of a div tag to show my images. Here the image isn't blurry at all. Why is this?
I NEED to use background images to circumvent the memory limit on the iPad and iPhone (if I use img tags I will hit a memory wall).
Can anyone help me? Thank you so much.
Im claiming 3 things:
Scaling a div stretches the pixels and not adding more.
background-size: contain; Ensures you that your background-image is fully showen
The div never change size.
As you can see here the div is still 200x200 pixels
The image is resized to be 200x200 pixels Even if it's 400x400 pixels. See here
Almost proved in 1. the font is still sharp but javascript thinks the width and height is 200x200 pixels.
Okay so for your fix:
There are several ways.
You can change width and height instead of scaling. This isn't any pretty, or at least you are very lucky if this animation doesn't lack it's way throw (on iOS).
Something else could be scaling and detection webkitTranstionEnd
$('div').bind("webkitTransitionEnd", function() {
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
});
Remember to unbind the webkitTransitionEnd event. Else its doubling the function call.
But what happend it's animation back. So we have to keep the transtion in a class so we can add and remove it when we want:
div {
-moz-transition-duration: 0ms;
}
div.transition {
-moz-transition-duration: 200ms;
}
And then add the class when we have to animate:
setTimeout(function() {
$('div').addClass("transition");
$('div').css({
backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
webkitTransform: 'scale( 2 )',
mozTransform: 'scale( 2 )'
});
}, 3000);
And remove it again in webkitTransitionEnd
$(this).removeClass('transition');
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
What??! It dosn't add / remove the class in time?! What happen.
Sometimes the browser needs a little while to make sure the class is added. Therefore you need to wrap the setting of css in a setTimeout(function(){...}, 0);
setTimeout(function() {
$('div').addClass("transition");
setTimeout(function(){
$('div').css({
backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
webkitTransform: 'scale( 2 )',
mozTransform: 'scale( 2 )'
});
}, 0);
}, 3000);
Also when we remove the class:
$(this).removeClass('transition');
setTimeout(function(){
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
}, 0);
So long, now the problem is that it's scaling up and get blurred and after the scale it gets super sharp.
What we can do about it I dont know, but hope it helps you some where!
Andreas