I am trying to create a clipping mask in VML that would correspond to clip-path in SVG? Is that possible?
Based on numerous, but fairly limited, examples I have tried drawing the shape:
<vml:group style="WIDTH: 1px; HEIGHT: 1px" class=vml-element coordsize = "1,1">
<vml:shape style="WIDTH: 1px; HEIGHT: 1px" id=vectorObject2 class=vml-element _fill-color="red" _fill-opacity="1" _stroke-color="black" _stroke-opacity="1" _stroke-width="1" coordsize = "1,1" filled = "t" fillcolor = "red" stroked = "t" strokecolor = "black" strokeweight = ".75pt" path = "m0,0 l100,0,0,100 xe">
<vml:fill class=vml-element opacity = "1"></vml:fill>
<vml:stroke class=vml-element opacity = "1"></vml:stroke>
</vml:shape>
</vml:group>
and then masking it using vmlframe:
<vml:vmlframe class=vml-element clip = "t" size = "15pt,37.5pt" src = "#vectorObject2"> </vml:vmlframe>
Drawing of shape (triangle) works as expected but I cannot find I way to mask it using vmlframe. Is that the right way to achieve masking?
Please ignore all bunch of weird custom attributes as majority of VML code was generated via 3rd party library.
Thanks in advance!
Use the CSS clip property to emulate clip-path as demonstrated in the Dojo GFX library or something like jsgraphics.
Related
I am looking for a simple method to retrieve a .png from a file folder, and place it in a shiny dashboard. I tried the suggested img(src='myImage.png', align = "right") from Embedding Image in Shiny App but I continue to get an error "unused arguments (src = "Slide1.PNG", align = "right")". I've tried to place my image in a dashboard, box, etc. without success.
You should show your code so that someone can review and point out issues in your usage. It really depends on where you want to place your image. The solution you pointed to shows you how to place an image in the main panel. The code below shows how to place an image in the header Title or to the right of title.
dashboardHeader(title = div("Testing",
img(src = 'YBS.png',
title = "A Clinical Graphics Application", height = "30px"),
style = "position: relative; margin:-3px 0px 0px 5px; display:right-align;"
),
titleWidth=450,
tags$li(div(
img(src = 'YBS.png',
title = "A Clinical Graphics Application", height = "30px"),
style = "padding-top:10px; padding-right:100px;"),
class = "dropdown"),...
In a tabBox the following should work
div(tags$img(height="50px", src="YBS.png", style="text-align: right;"))
I want to add a colored rectangle object right before a specific Paragraph object.
Essentially, I want to convert this CSS code to itext:
#theText li:before {
content: "■";
color: #e2e2e2;
font-size: 40px;
position: relative;
left: -5px;
}
Color, font-size, and alignment I know how to do in itext, but how do I position the rectangle right before a line of text? The Rectangle class accepts absolute coordinates for the position of the rectangle object, but this is impractical, so is there a way to give like an ID to the paragraph object, and position the rectangle relative to it?
I am using itext 5.5.9.
I have a shape in easeljs. When it is initially created it has a backgroundcolor set to white. Then, at some point later down the line, I need to give this rectangle shape a background image - I really can't get it to work.
I would like the background image of the shape to be positioned like this:
background-image: url(images/background.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
Anyone who can tell me how to approach this. Thanks :)
If you want to use a background image with EaselJS, you can't use CSS.
You can instead use the bitmapFill with EaselJS graphics, which does a pattern fill using an image.
var img = document.createElement("img");
img.src = "path/to/image";
var shape = new createjs.Shape();
shape.graphics.beginBitmapFill(img, "optionalRepeat", optionalMatrix);
shape.graphics.drawRect(0,0,100,100);
Here is a quick fiddle showing it in action: http://jsfiddle.net/lannymcnie/ogy1qmxn/2/
Cheers,
I have tried this jsfiddle and can't get the background canvas to be at full size of the window. I have tried video.width = window.innerWidth but with no luck. Can some explain?
update:
the problem i think is with this code (and if this is the case I think the title should be "Give PlaneGeometry the dimensions of window.innerWindth, window.innerHeight"
//the geometry on which the movie will be displayed;
//movie image will be scaled to fit these dimensions.
movieGeometry = new THREE.PlaneGeometry( 2,2,0 );
movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
// movieScreen.position.set(0,50,0);
movieScreen.material.depthTest = false;
movieScreen.material.depthWrite = false
when I change the parameters of the PlaneGeometry the movie image will be scaled to fit these dimensions. The problem is that I can't find the right dimensions.
body has a margin.
add:
body {
margin: 0px;
}
fiddle
In webkit if I set border radius on an image that has a border, the image won't sit nicely within the border but overlay the border and remains square.
http://jsfiddle.net/ECNJ4/
Any fixes that don't mean using a background image instead or adding markup?
check out: http://jsfiddle.net/ECNJ4/6/
CSS
img {
border-radius: 15px;
box-shadow: 0 0 0 16px red;
}
I had to use a wrapper element around the img to make it work. Maybe there's a better solution, but I didn't find it.