I am working in a canvas document using Flash CC and have the following labeled moveclips on the stage mask_mc (which is a movieclip with a alpha gradient) and logo. The objective is to create a sheen going across the logo.
var mask_mc = this.mask_mc;
mask_mc.cache(0, 0, 232, 196);
var logo = this.logo;
logo.cache(0, 0, 271, 40);
logo.filters = [
new createjs.AlphaMaskFilter(mask_mc.cacheCanvas)
];
All I am trying to do is emulate what an alpha gradient mask used to do using AS3, but can't get it to work with the above code:
//Original AS3 code
mask_mc.cacheAsBitmap = true;
logo.cacheAsBitmap = true;
logo.mask = mask_mc;
Thanks!
You have to cache (or updateCache) after you apply the filter(s)
var logo = this.logo;
logo.filters = [
new createjs.AlphaMaskFilter(mask_mc.cacheCanvas)
];
logo.cache(0, 0, 271, 40);
Your second example will not work because the mask property requires a Shape, and will not work with a canvas/cache.
Related
How to rotate SmartArtNode text aspose.slide
I use:
tmNode.TextFrame.TextFrameFormat.RotationAngle = 90
But it's not working
I have observed your requirements and suggest you to please try using Aspose.Slides for.NET 17.1.0 using following sample code. I am able to observe the rotation effect on text. I hope this will be helpful. You may also contact us in Aspose.Slides forums if there is any further inquiry.
using (Presentation presentation = new Presentation())
{
// Accessing the slide
ISlide slide = presentation.Slides[0];
// Adding SmartArt shape and nodes
var chevron = slide.Shapes.AddSmartArt(10, 10, 800, 60, SmartArtLayoutType.ClosedChevronProcess);
var node = chevron.AllNodes.AddNode();
node.TextFrame.Text = "Some text";
node.TextFrame.TextFrameFormat.RotationAngle = 90;
// Saving Presentation
presentation.Save(dataDir + "FillFormat_SmartArt_ShapeNode_out.pptx", SaveFormat.Pptx);
}
I work with Aspose as Developer evangelist.
How do i make an image scale with bicubic for MS Edge? Is there some CSS or similar that can change the behavour.
See this page: http://duttongarage.com/Race-Workshop~317
On the right there are two images that have textured background, you can see the weird artifacts quite clearly
Chrome on the Left, MS Edge on the Right. As you can see there is some weird moire effect from the resize being nearest neighbor or linear, not bicubic.
Another example that is more typical:
Microsoft Edge on Top, Chrome on the Bottom. Notice the pixelation, its like what i would expect from browsers from the last decade.
Sorry for stupidness of answer, but, as I can see, Edge doesn't support any image-rendering options, so, please, try to use jQuery to resize picture.
For example, you can use solution from this answer:
just create <canvas id="canvas"></canvas> under your image and see:
screenshot
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function () {
canvas.height = canvas.width * (img.height / img.width);
/// step 1
var oc = document.createElement('canvas'),
octx = oc.getContext('2d');
oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);
/// step 2
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
0, 0, canvas.width, canvas.height);
}
img.src = "http://duttongarage.com/img/2167/824";
You can easily adjust oc.width with math. For example, you can use
oc.width = $(".me-wrap-image").width();
oc.height = $(".me-wrap-image").height();
Better, if you adjust your structure by
| .me-wrap-image
| .some-class-to-get-width-and-height
-> img
for img.src you can use
$("div.some-class-to-get img").each(function(){
img.src = $(this).attr('src');
});
But I'm not sure, how to make it work properly.
Hope you fix it :)
Obsolete
This is obsolete solution and does not work on recent versions of MS Edge.
===========
This little css tweak fixed problem for me:
img {
-ms-interpolation-mode: bicubic;
}
Recently I started working on HTML5 Canvas, I'm new to it.
I've a problem as follows:
I'm loading a Canvas with Body Chart Image (Predefined Image) and on that User will Draw some lines, shapes, etc.
After that I'll generate an image object as follows
var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;
But, Here it generates only those elements which are drawn by users (lines, shapes) as PNG Image. It won't take that Predefined canvas background Image.
I need to generate a PNG image which should include both the Canvas background Image as well as User entered drawing elements.
How to do this?
Try to actually draw you image onto your canvas, utilizing these functions:
var canvas = document.getElementById("MyCanvas");
var img = new Image();
img.src = 'pathToYourImageHere';
canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */
When you now try to save it, it should also save your background image.
EDIT:
In response to your comment:
You can circument your layering problem by using two different canvases. One for the image, and one for your drawing. Then layer them on top of each other using absolute positioning.
You can read more here: Save many canvas element as image
EDIT2:
But actually you shouldn't have a layering problem, since the following code will first draw the image and then draw the arc, and the layering will be fine:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "somePathToAnImage";
context.drawImage(imageObj, 50, 50);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "red";
context.stroke();
Even though the layering is fine, you will be better of by using two canvases, in case you would like to only save the drawing, without the background. You can always save both into a new canvas and save that, when you only use one canvas you'll have a hard time separating the drawing from the background.
This is because the image needs time to load, you have to use the onload function.
imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;}
if (imgLoaded) { /*you draw shapes here */ }
Is it possible to change the custom pen colour attribute after creating it using this call?
HPEN hPen = CreatePen(PS_SOLID, 1, RGB(0, 0, 0)); //Create a solid pen.
or how should i create a pen whose colour colour can be changed.
I am afraid that this is not possible using any non-esoteric approach.
I think, however, that you can use the DC_PEN stock object and the SetDCPenColor function, like so:
SelectObject(dc, GetStockObject(DC_PEN));
SetDCPenColor(dc, clGreen);
Rectangle(dc, 10, 10, 200, 200);
SetDCPenColor(dc, clRed);
Rectangle(dc, 300, 300, 500, 500);
in Delphi syntax.
I'm working with Flex 3.4 SDK.
I'm trying to programmatically(yep, must be this way) style/skin a VBox so that its top right corner is rounded, and it gets a two colors gradient brackground.
Modifying examples I found around I was able to accomplish both effects(corner and background) but only separately:
VBox with not all rounded corners: http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_6.html
VBox with gradient background: http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/
But what I need to do is to apply both at the same time. And all my coding attempts so far have failed silently.
Would anyone know how to go about doing this correctly?
I have a post on my blog on how to make this exact component Here.
You create a basic custom MXML component (extending in this case, VBox). You specify a programmatic skin, which is where the bevel and gradient gets applied.
The programmatic skin does all it's drawing in the updateDisplayList function.
Here is some of the code (the rest is on my blog, with a demo)
var g:Graphics = graphics;
var cn:Number = this.getStyle("cornerRadius");
var crtl:Number = this.getStyle("cornerRadiusTopLeft") > 0 ? this.getStyle("cornerRadiusTopLeft") : cn;
var crtr:Number = this.getStyle("cornerRadiusTopRight") > 0 ? this.getStyle("cornerRadiusTopRight") : cn;
var crbl:Number = this.getStyle("cornerRadiusBottomLeft") > 0 ? this.getStyle("cornerRadiusBottomLeft") : cn;
var crbr:Number = this.getStyle("cornerRadiusBottomRight") > 0 ? this.getStyle("cornerRadiusBottomRight") : cn;
var gradFrom:Number = this.getStyle("gradientFrom");
var gradTo:Number = this.getStyle("gradientTo");
var b:EdgeMetrics = borderMetrics;
var w:Number = unscaledWidth - b.left - b.right;
var h:Number = unscaledHeight - b.top - b.bottom;
var m:Matrix = verticalGradientMatrix(0, 0, w, h);
g.clear();
g.beginGradientFill("linear", [gradFrom, gradTo], [1, 1], [0, 255], m);
g.lineStyle(1,borderColor,1,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.ROUND);
GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, crtl, crtr, crbl, crbr);
g.endFill();
}
for a demo, look Here. Hope this helps.
Follow the steps from your second link, but instead of using "drawRect", you should be able to use "drawRoundRectComplex". You may need to play around with some of the matrix settings though. I seem to remember having some problems.
Another option is to use degrafa. There can be a bit of a learning curve, but it's powerful and can do this.