I am trying to add text to a PIXI Application as a hole, cutting through the canvas showing what's underneath it, but need to keep the stroke around each letter. I am using a blendMode to cut the text through, but it removes the stroke as well. Is it even possible?
//hacked clearing blendmode
app.renderer.state.blendModes[20] = [0,
WebGLRenderingContext.ONE_MINUS_SRC_ALPHA];
//Adding text
var style = new PIXI.TextStyle({
fontFamily: 'din-condensed',
fontSize: '400px',
fontWeight: 400,
stroke: '#25556f',
strokeThickness: 5
});
var invertedText = new PIXI.Text(text, style);
invertedText.x = 0;
invertedText.y = (height / 2) - ($(heading).height() / 2);
invertedText.blendMode = 20;
app.stage.addChild(invertedText);
Related
I am using the p5.js Web Editor
var sketch = function (p) {
with(p) {
p.setup = function() {
createCanvas(400, 400);
secCanvas = createGraphics(400, 400);
secCanvas.clear();
trans = 0;
drop_size = 10;
sun_size = 50;
radius = 10;
};
p.draw = function() {
background(3, 182, 252, 1);
image(secCanvas, 0, 0)
secCanvas.fill(255, 162, 0, 1)
secCanvas.ellipse(width/2, 0 + sun_size, sun_size)
fill(40, trans)
trans = random(255);
ellipse(random(mouseX + radius, mouseX - radius), random(mouseY + radius, mouseY - radius), drop_size)
drop_size = random(50)
};
}
};
let node = document.createElement('div');
window.document.getElementById('p5-container').appendChild(node);
new p5(sketch, node);
body {
background-color:#efefef;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<div id="p5-container"></div>
When I set a discrete value of alpha in secCanvas.fill(). The value appears to be gradually increase(and stops soon), while I gave no such instruction. Why is this happening? This only happens when I put background(3, 182, 252, 1); in the draw function but not when I put it in the setup function.
Each frame is drawn on top of all previous frames, so when you draw a semi-transparent background, you can still see the previous frames underneath it.
Think of it as adding a very thin coat of paint over top what you've already painted. Because the color you're adding is semi-transparent, you can still see what's underneath it. Then during the next frame, you add another layer of paint, and the previous frames get just a little more faint.
They stop becoming more faint because of the way the computer calculates the new color, based on the previous frames and the new semi-transparent background color. Long story short, the color you're drawing is almost 100% transparent, so it's not strong enough to completely hide previous frames.
I'm using a scrollview to make a image gallery for my app and I have it mostly working. it'll allow me to scroll through the images one by one but the very last image always get cut off and I'm not sure why.
this is the bulk of the operation:
var idx = 0;
foreach (var mediaItem in _mediaItems)
{
var xPosition = UIScreen.MainScreen.Bounds.Width * idx;
var imageView = new UIImageView();
imageView.SetImage(new NSUrl(mediaItem), UIImage.FromBundle("image_placeholder"));
imageView.Frame = new CGRect(xPosition, 0, svGallery.Frame.Width + 50, svGallery.Frame.Height);
imageView.ContentMode = UIViewContentMode.ScaleAspectFit;
svGallery.ContentSize = new CGSize
{
Width = svGallery.Frame.Width * (idx + 1)
};
svGallery.AddSubview(imageView);
idx++;
}
minus that flaw, this works perfectly and as I expect it to.
From shared code , the Width of ContenSize is:
Width = svGallery.Frame.Width * (idx + 1)
However, each Width(svGallery.Frame.Width + 50) of ImageView is greater than vGallery.Frame.Width:
imageView.Frame = new CGRect(xPosition, 0, svGallery.Frame.Width + 50, svGallery.Frame.Height);
Therefore, the actually Width of ContenSize can not contains all the ImageView's Content. And if the number of ImageView is larger, the last picture will be cut off more.
You can modif the Width of ContentSize as follow to check whether it works:
svGallery.ContentSize = new CGSize
{
Width = (svGallery.Frame.Width + 50) * (idx + 1)
};
The TextBaseline enum in Flutter has two options:
alphabetic
ideographic
How do these values actually change the baseline?
TextBaseline.alphabetic
The alphabetic baseline is the line that the letters in alphabets like English sit on. Here is an example:
You can see that the English letters sit nicely on the line, but it cuts through the Chinese characters.
TextBaseline.ideographic
When you use the ideographic option, though, the baseline is at the bottom of the text area. Note that the Chinese characters don't actually sit right on the line. Rather, the line is at the very bottom of the text line.
Supplemental code
You can plug this into a CustomPaint widget (as described here) to reproduce the above examples.
#override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: Colors.black,
fontSize: 30,
);
final textSpan = TextSpan(
text: 'My text 文字',
style: textStyle,
);
final textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
);
textPainter.layout(
minWidth: 0,
maxWidth: size.width,
);
print('width: ${textPainter.width}');
print('height: ${textPainter.height}');
// draw a rectangle around the text
final left = 0.0;
final top = 0.0;
final right = textPainter.width;
final bottom = textPainter.height;
final rect = Rect.fromLTRB(left, top, right, bottom);
final paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 1;
canvas.drawRect(rect, paint);
// draw the baseline
final distanceToBaseline =
textPainter.computeDistanceToActualBaseline(TextBaseline.ideographic);
print('distanceToBaseline: ${distanceToBaseline}');
canvas.drawLine(
Offset(0, distanceToBaseline),
Offset(textPainter.width, distanceToBaseline),
paint,
);
// draw the text
final offset = Offset(0, 0);
textPainter.paint(canvas, offset);
}
I am trying to include a world map in a dynamicaly crreated div using Raphael js. Once the path is defined, I am updating rapahel paper object's viewbox to scale the path. Although this part is working, I am not able to align the path to the center of the div. The following is what I have done so far according to this answer:
var paper = Raphael("map"),
path = paper.path(w_path).attr({fill: "#000", "stroke-width": 0, "stroke-linejoin": "round", opacity: 1}),
box = path.getBBox(),
margin = Math.max(box.width, box.height) * 0.025; // set the viewbox to match the bounding box of the path with 2.5% margins
paper.setViewBox(box.x - margin, box.y - margin, box.width + margin * 2, box.height + margin * 2);
My question is how can I align the path at the center of the div (map div), both vertically and horizontally?
UPDATE:
I have added a jsFiddle for this.
I've just started playing with SVG and Raphael.js and am trying to draw a filled arc but not sure how to start. I'm trying to draw a basic padlock and have the body and two parts of the bolt to fit the arc on top. It's basically a filled 180deg arc, 10 pixels wide. I'm guessing I need to use the .path() but not sure of the syntax or whether I want to be using "curveTo" or "arc" - struggling to find any good SVG or Raphael tutorial sites to be honest.
var padlockBody = paper.rect(100, 100, 100, 100, 5);
padlockBody.attr("fill", "#000000");
var leftBoltPart = paper.rect(120, 70, 10, 30);
leftBoltPart.attr("fill", "#000000");
var rightBoltPart = paper.rect(170, 70, 10, 30);
rightBoltPart.attr("fill", "#000000");
// TODO: filled arc to fit on top of left/right bolt parts
Arcs are notoriously challenging to write by hand (in pure SVG or in Raphael, it's the same).
I usually extend Raphael with these methods (credits belong to the55)
// http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
Raphael.fn.arc = function(startX, startY, endX, endY, radius1, radius2, angle) {
var arcSVG = [radius1, radius2, angle, 0, 1, endX, endY].join(' ');
return this.path('M'+startX+' '+startY + " a " + arcSVG);
};
Raphael.fn.circularArc = function(centerX, centerY, radius, startAngle, endAngle) {
var startX = centerX+radius*Math.cos(startAngle*Math.PI/180);
var startY = centerY+radius*Math.sin(startAngle*Math.PI/180);
var endX = centerX+radius*Math.cos(endAngle*Math.PI/180);
var endY = centerY+radius*Math.sin(endAngle*Math.PI/180);
return this.arc(startX, startY, endX-startX, endY-startY, radius, radius, 0);
};
You can find a demo here: http://jsfiddle.net/cahT9/