Using Vis.js I want to Generate something where in there is a gap between the Circular image and the Node border
Sample:
I cannot find anything at the Vis.js documentation for such a modification, can anyone guide me for it?
vis.js GitHub issue report
There's no way to achieve this unfortunelly. The color option only accepts one border and you can't make use of CSS since Vis is built using canvas, not SVG.
What you can do to achieve this is crop your image in a circular shape with some transparent padding to make the gap. And then vis would add the black border for you.
yes you can do that.do not add border option in node.you can add circular border in afterDrawing event.
network.on("afterDrawing", function (ctx) {
var imageSize= 21;
var nodeId = 1;
var nodePosition = network.getPositions([nodeId]);
ctx.strokeStyle = '#006bb3';
ctx.lineWidth = 4;
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y, imageSize+5);
ctx.stroke();
})
Related
I am trying to delete canvas. For that I have used below 2lines of code
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);**
This is just clearling the canvas, but on click on that canvas its reshowing same data.
The canvas is not deleted, but temporary hidden on clear.
Konva is a scene graph for your canvas. The scene has nodes, such as Layer, Group, Shape.
You don't need to clear the canvas element manually. You just need to destroy all nodes from the scene. Like this:
layer.destroyChildren();
layer.draw();
I tried this too.Thats also not working.
I tried below code and thats working fine.
**var stage_main = this.$refs.stage.getStage();
stage_main.clear();
Object.keys(this.canvasElements).forEach((key) => {
this.canvasElements[key]= [];
});**
I also need to clear canvaselement object along with stage clear
I implemented a little drawing function into my app with CreateJS like so:
var currentPosition = this.posOnStage(event);
var drawing = container.getChildByName('drawing');
drawing.graphics.ss(this.brushSize, "round").s(this.brushColor);
drawing.graphics.mt(this._lastMousePosition.x, this._lastMousePosition.y);
drawing.graphics.lt(currentPosition.x, currentPosition.y);
drawing.alpha = this.brushAlpha;
container.updateCache(this.enableErasing ? "destination-out" : "source-over");
drawing.graphics.clear();
this._lastMousePosition = this.posOnStage(event);
As you can see, the alpha value of this drawing can change. Sadly you can draw over a point you once did draw, so when you draw over a point multiple times the alpha effect will go away. Any idea how to solve this ?
Thanks :)
EDIT:
I tried it like gskinner and Lanny 7 proposed, but it didn't work. I attached a image so you can see the problem.
As suggested by Lanny, apply the alpha to the actual stroke, not to the Shape. You can use Graphics methods to help with this.
For example:
// set the brush color to red with the current brush alpha:
this.brushColor = createjs.Graphics.getRGB(255, 0, 0, this.brushAlpha);
I am trying to use mask on my QWidget. I want to overlay existing widget with row of buttons - similar to Skype
Notice that these buttons don't have jagged edges - they are nicely antialiased and widget below them is still visible.
I tried to accomplish that using Qt Stylesheets but on pixels that should be "masked out" was just black colour - it was round button on black, rectangular background.
Then I tried to do this using QWidget::mask(). I used following code
QImage alpha_mask(QSize(50, 50), QImage::Format_ARGB32);
alpha_mask.fill(Qt::transparent);
QPainter painter(&alpha_mask);
painter.setBrush(Qt::black);
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QPoint(25,25), 24, 24);
QPixmap mask = QPixmap::fromImage(alpha_mask);
widget.setMask(mask.mask());
Sadly, it results in following effect
"Edges" are jagged, where they should be smooth. I saved generated mask so I could investigate if it was the problem
it wasn't.
I know that Linux version of Skype does use Qt so it should be possible to reproduce. But how?
One possible approach I see is the following.
Prepare a nice high resolution pixmap with the circular button icon over transparent background.
Paint the pixmap on a square widget.
Then mask the widget leaving just a little bit of margin beyond the border of the circular icon so that the widget mask jaggedness won't touch the smooth border of the icon.
I managed to get a nice circular button with not so much code.
Here is the constructor of my custom button:
Button::Button(Type t, QWidget *parent) : QPushButton(parent) {
setIcon(getIcon(t));
resize(30,30);
setMouseTracking(true);
// here I apply a centered mask and 2 pixels bigger than the button
setMask(QRegion(QRect(-1,-1,32,32),QRegion::Ellipse));
}
and in the style sheet I have the following:
Button {
border-radius: 15px;
background-color: rgb(136, 0, 170);
}
With border-radius I get the visual circle and the mask doesn't corrupt the edges because it is 1 pixel away.
You are using the wrong approach for generating masks. I would generate them from the button images themselves:
QImage image(widget.size(), QImage::Format_Alpha8);
widget.render(&image);
widget.setMask(QBitmap::fromImage(image.createMaskFromColor(qRgba(0, 0, 0, 0))));
Is there any way to change the sc-waveform container background from #efefef without having to load the waveform.js library? I have enough libraries loading already and the conainer bg conflicts with our site background color
I am experiencing the same issue and have had this problem before ( Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS ).
Here is an example with your waveform: http://jsfiddle.net/eLmmA/3/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 1800; // must match
canvas.height = 280; // must match
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'WAVEFORM_IMAGE.EXT';
}
img.src = 'OVERLAY_IMAGE.EXT';
document.body.appendChild(canvas);
});
I think I understand what you mean. You want to change the color of the waveform background, the gray stuff around the waveform:
The problem here is that waveforms you get from SoundCloud API are represented as partly transparent PNG images, where waveform itself is transparent and the chrome around it is gray (#efefef) color.
So, unless the library you want to use for waveform customisation is using HTML5 canvas, you won't be able to use change the color of that chrome (so no, not possible with either HTML5 Widget API or Custom Player API). And you have to use waveform.js or the likes (or modify the waveform image on canvas yourself).
You could try to experiment with newest CSS filters (webkit only for now) and SVG filters, and possibly some MS IE filters for older IE versions, but I am not sure you'd manage to just change the color.
I have an image area in my application with width:530px and height:510px. I want to place images in that area but the images comes in different different sizes. how to crop or scale the image without losing aspect ratio to fill that area. Is there any native methods available in winjs?
You have a few options for that.
One is to use the ViewBox control that WinJS provides you. The ViewBox can only have a single child (so you would have your tag as its only child perhaps or a div that contains your img) and it will scale that child (using CSS transforms) up to fit into its container (without changing the aspect ratio). It's pretty slick.
Another option is to set the image as the CSS background-image property of a container (such as a div) and set the background-size property to contain. This will stretch the image up to the size of the container.
A final option that you have to resort to if your case is a bit special is not such a bad option after all. In the updateLayout method of your page, you can refer to the element and explicitly set its CSS properties to fit. At that point you'll know all about the layout and can easily do the math to figure out what size image should be. Here's some code from one of my projects where I do this. Notice that I'm comparing the aspect ratio of the screen and the image to determine whether I should size to the width or the height. Unlike your situation (I'm guessing), my code makes sure the image fills the screen and excess is clipped. I'm guessing you want your img to be contained.
function setImagePosition() {
var img = q(".viewCamera #viewport img");
if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
img.style.width = format("{0}px", outerWidth);
img.style.height = "";
img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
img.style.left = "0px";
} else {
img.style.width = "";
img.style.height = format("{0}px", outerHeight);
img.style.top = "0px";
img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
}
}
Hope that helps!
Are you referring to scaling HTML images? If so, you can set either one, width or height. Whichever you set, the other will scale and keep image aspect ratio.