Hello!
I created new pinBuilder, but text which I want to write in the the pins looks very small.
I tried to change writeTextToCanvas.js, but it did not reach the correct proportions.
Please tell me how can I increase the text inside the pin?
Hello,
PinBuilder.fromText takes a text, color and size parameter. You can use the size parameter to make the pin bigger. Here is an example:
pinBuilder.fromText(‘this is my text’, Cesium.Color.BLACK, 48) //size = 48
``
However, if you are using a lot of text, a pin is probably not the best solution for you. It is really only ideal for a few characters.
You might want to consider using a label instead: http://localhost:8080/Apps/Sandcastle/index.html?src=Labels.html&label=Showcases
Best,
Hannah
Yes, but the text will still hold about 10 percent of the pin. And I want to increase the canvas for text.
I created a pin that looks like a flag. I need to write a small text is on the flag. The label is a good idea, but it does not suit me.
This is a my version drawPin: (in cesium/Source/Core/PinBuilder.js)
function drawMainFlag(context2D, color, color2, size) {
context2D.save();
context2D.scale(size / 24, size / 24); //Added to auto-generated code to scale up to desired size.
context2D.fillStyle = color.toCssColorString(); //Modified from auto-generated code.
context2D.beginPath();
context2D.moveTo(0,0);
context2D.lineTo(24,0);
context2D.lineTo(24,24);
context2D.lineTo(0,24);
context2D.closePath();
context2D.clip();
context2D.strokeStyle = 'rgba(0,0,0,0)';
context2D.lineCap = 'butt';
context2D.lineJoin = 'miter';
context2D.miterLimit = 4;
context2D.save();
context2D.save();
context2D.fillStyle = color.toCssColorString();
context2D.strokeStyle = "#000000";
context2D.lineWidth = 0.8460000157356262;
context2D.lineCap = "butt";
context2D.lineJoin = "miter";
context2D.miterLimit = 2;
context2D.translate(0.537864,1.39783);
context2D.beginPath();
context2D.moveTo(23.1652,2.88858);
context2D.lineTo(23.2506,13.2615);
context2D.bezierCurveTo(21.8628,12.5375,19.5891,14.9596,17.8087,14.5069);
context2D.bezierCurveTo(16.3006,14.1236,14.6513,11.8326,13.6113,11.7512);
context2D.bezierCurveTo(11.6024,11.5939,10.7326,11.8085,8.21161,13.0151);
context2D.bezierCurveTo(5.32287,14.3977,4.61371,11.1122,0.119319,11.8983);
context2D.lineTo(0,22.6886);
context2D.lineTo(0.126983,0);
context2D.bezierCurveTo(4.84511,1.94815,4.15795,-0.0633515,8.2095,1.61971);
context2D.bezierCurveTo(9.08774,1.98454,11.1566,0.469138,13.7687,0.249908);
context2D.bezierCurveTo(15.3818,0.114528,16.9351,2.66022,18.4953,3.00281);
context2D.bezierCurveTo(20.6831,3.48321,22.688,1.48161,23.1652,2.88858);
context2D.closePath();
context2D.fill();
context2D.stroke();
context2D.restore();
context2D.save();
context2D.fillStyle = color2.toCssColorString(); //Modified from auto-generated code.
// var g=context2D.createLinearGradient(0,0,5.8686131386875,4.204379562050001);
// g.addColorStop(0,"rgba(255, 255, 255, 1.00000000000)");
// g.addColorStop(1,"rgba(0, 255, 0, 1.00000000000)");
// context2D.fillStyle = g;
context2D.strokeStyle = "#000000";
context2D.lineWidth = 1.25;
context2D.lineCap = "square";
context2D.lineJoin = "miter";
context2D.miterLimit = 2;
context2D.translate(17.562,17.3431);
context2D.beginPath();
context2D.moveTo(0,0);
context2D.lineTo(5.8686131386875,0);
context2D.quadraticCurveTo(5.8686131386875,0,5.8686131386875,0);
context2D.lineTo(5.8686131386875,4.204379562050001);
context2D.quadraticCurveTo(5.8686131386875,4.204379562050001,5.8686131386875,4.204379562050001);
context2D.lineTo(0,4.204379562050001);
context2D.quadraticCurveTo(0,4.204379562050001,0,4.204379562050001);
context2D.lineTo(0,0);
context2D.quadraticCurveTo(0,0,0,0);
context2D.closePath();
context2D.fill();
context2D.stroke();
context2D.restore();
context2D.restore();
context2D.restore();
}