以编程方式增加 ARC 的长度
Increase the length of ARC programmatically
我正在尝试在圆上显示 ARC。
我想增加 ARC 长度。我可以手动增加，但我不知道如何以编程方式增加 ARC 的长度。
如果我知道如何增加 ARC 的长度，那么我将根据我的要求创建多个圆圈。
let circleBlue1 = slide.insertShape(SlidesApp.ShapeType.ELLIPSE, 610, 110, 70, 70);
circleBlue1.getBorder().setWeight(8).getLineFill().setSolidFill("#007A86");
circleBlue1.getFill().setSolidFill('#FFFFFF');
let circleBlue2 = slide.insertShape(SlidesApp.ShapeType.ELLIPSE, 622, 122, 46, 46);
circleBlue2.getBorder().setWeight(12).getLineFill().setSolidFill("#007A86");
circleBlue2.getFill().setSolidFill('#FFFFFF');
let arc1 = slide.insertShape(SlidesApp.ShapeType.ARC, 610, 110, 70, 70);
arc1.setRotation(200);
arc1.getBorder().setWeight(8).getLineFill().setSolidFill("#D9D9D9");
let arc2 = slide.insertShape(SlidesApp.ShapeType.ARC, 622, 122, 46, 46);
arc2.setRotation(200);
arc2.getBorder().setWeight(12).getLineFill().setSolidFill("#D9D9D9");
结果来了：
所需结果：
据我所知，它无法通过 Apps 脚本或 API
我尝试检查 Apps 脚本中所有可能的属性，但是 none 在我修改弧的扫描时发生了变化。然后我尝试检查 slides API
最多给了我这些参数：
{
"objectId": "p",
"pageElements": [
{
"objectId": "SLIDES_API17000000589_3",
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": -0.1652,
"scaleY": -0.1636,
"shearX": -0.1057,
"shearY": 0.1067,
"translateX": 6532089.87,
"translateY": 1296513.29,
"unit": "EMU"
},
"shape": {
"shapeType": "ARC",
"shapeProperties": {
"shapeBackgroundFill": {
"propertyState": "NOT_RENDERED",
"solidFill": {
"color": {
"themeColor": "LIGHT2"
},
"alpha": 1
}
},
"outline": {
"outlineFill": {
"solidFill": {
"color": {
"rgbColor": {
"red": 0.8509804,
"green": 0.8509804,
"blue": 0.8509804
}
},
"alpha": 1
}
},
"weight": {
"magnitude": 152400,
"unit": "EMU"
},
"dashStyle": "SOLID"
},
"shadow": {
"type": "OUTER",
"transform": {
"scaleX": 1,
"scaleY": 1,
"unit": "EMU"
},
"alignment": "BOTTOM_LEFT",
"blurRadius": {
"unit": "EMU"
},
"color": {
"rgbColor": {}
},
"alpha": 1,
"rotateWithShape": false,
"propertyState": "NOT_RENDERED"
},
"contentAlignment": "MIDDLE",
"autofit": {
"autofitType": "NONE",
"fontScale": 1
}
}
}
}
],
"slideProperties": {
"layoutObjectId": "p2",
"masterObjectId": "simple-light-2",
"notesPage": {
"objectId": "p:notes",
"pageType": "NOTES",
"pageElements": [
{
"objectId": "i2",
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": 2.032025,
"scaleY": 1.143,
"translateX": 381300,
"translateY": 685800,
"unit": "EMU"
},
"shape": {
"shapeProperties": {
"outline": {
"propertyState": "INHERIT"
}
},
"placeholder": {
"type": "SLIDE_IMAGE",
"parentObjectId": "n:slide"
}
}
},
{
"objectId": "i3",
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": 1.8288,
"scaleY": 1.3716,
"translateX": 685800,
"translateY": 4343400,
"unit": "EMU"
},
"shape": {
"shapeType": "TEXT_BOX",
"shapeProperties": {
"shapeBackgroundFill": {
"propertyState": "INHERIT"
},
"outline": {
"propertyState": "INHERIT"
},
"shadow": {
"propertyState": "INHERIT"
},
"autofit": {
"fontScale": 1
}
},
"placeholder": {
"type": "BODY",
"index": 1,
"parentObjectId": "n:text"
}
}
}
],
"pageProperties": {
"pageBackgroundFill": {
"propertyState": "INHERIT"
}
},
"notesProperties": {
"speakerNotesObjectId": "i3"
}
}
},
"revisionId": "_7MTqW3NeaZ8yQ",
"pageProperties": {
"pageBackgroundFill": {
"propertyState": "INHERIT"
}
}
}
我手动更改了圆弧的扫掠，除了 revisionId.
之外，任何属性都没有变化
所以在这种情况下，鉴于我找不到任何现有的功能请求，您可能想使用以下模板自己提交一个：
https://issuetracker.google.com/issues/new?component=191598&template=823918
说明无法通过 API 或 Apps 脚本修改弧的扫描。确保添加尽可能多的信息和理由，以增加您获得关注的机会。
解决方法
最简单的方法可能是制作你认为你会使用的进度条，然后将它们保存在驱动器中，并在需要时插入它们。也就是说，对于您想要的每个进度阶段可能有 10 张图片。
或者，使用 canvas API 的方法稍微复杂一些。由于您可以通过 getUi 在边栏中加载 HTML，您还可以使用 canvas API 创建图像，同样，您可以从中创建图像并将它们传递给您的介绍。
这里有一个演示：
Code.gs
function test(){
// This creates the HTML output from the file arc-creator.html
let html = HtmlService.createHtmlOutputFromFile('arc-creator')
// This uses the html to load the sidebar
SlidesApp.getUi().showSidebar(html)
}
// This function will be called from the HTML once the canvas has finished drawing.
function addToPresentation(dataURL){
let slide = SlidesApp.getActivePresentation().getSlides()[0]
// Convert the data Url to png and add to Presentation
var type = (dataURL.split(";")[0]).replace('data:','');
var img = Utilities.base64Decode(dataURL.split(",")[1]);
var blob = Utilities.newBlob(img, type, "image.png");
slide.insertImage(blob);
}
arc-creator.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
<script>
// This is the function that creates a data URL image
// The argument is the percentage complete of the progress bar
function createProgressArc(number){
// ID the canvas element and initialize the context
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Some utility variables
var cw=context.canvas.width/2;
var ch=context.canvas.height/2;
// Drawing background
context.clearRect(0,0,200,200);
// Drawing first circle
context.beginPath();
context.arc(cw,ch,50,0,2*Math.PI);
context.fillStyle='#FFF';
context.fill();
context.strokeStyle='#e7f2ba';
context.lineWidth = 10;
context.stroke();
// Drawing arc
context.fillStyle='#000';
context.strokeStyle='#b3cf3c';
context.lineWidth=10;
context.beginPath();
let progress = (2 * Math.PI) * (number/100)
context.arc(cw,ch,50,0,progress);
context.stroke();
// Converting to data URL
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
let dataURL = createProgressArc(75)
// Here is where the resulting image is sent back to the Presentation as a data URL
google.script.run.addToPresentation(dataURL)
</script>
</html>
运行 这将在 UI 中打开侧边栏，绘制图像，然后将图像添加到第一张幻灯片。
这种方法的缺点是需要打开UI，否则不会运行需要画弧的JavaScript。
参考资料
我正在尝试在圆上显示 ARC。 我想增加 ARC 长度。我可以手动增加，但我不知道如何以编程方式增加 ARC 的长度。
如果我知道如何增加 ARC 的长度，那么我将根据我的要求创建多个圆圈。
let circleBlue1 = slide.insertShape(SlidesApp.ShapeType.ELLIPSE, 610, 110, 70, 70);
circleBlue1.getBorder().setWeight(8).getLineFill().setSolidFill("#007A86");
circleBlue1.getFill().setSolidFill('#FFFFFF');
let circleBlue2 = slide.insertShape(SlidesApp.ShapeType.ELLIPSE, 622, 122, 46, 46);
circleBlue2.getBorder().setWeight(12).getLineFill().setSolidFill("#007A86");
circleBlue2.getFill().setSolidFill('#FFFFFF');
let arc1 = slide.insertShape(SlidesApp.ShapeType.ARC, 610, 110, 70, 70);
arc1.setRotation(200);
arc1.getBorder().setWeight(8).getLineFill().setSolidFill("#D9D9D9");
let arc2 = slide.insertShape(SlidesApp.ShapeType.ARC, 622, 122, 46, 46);
arc2.setRotation(200);
arc2.getBorder().setWeight(12).getLineFill().setSolidFill("#D9D9D9");
结果来了：
所需结果：
据我所知，它无法通过 Apps 脚本或 API
我尝试检查 Apps 脚本中所有可能的属性，但是 none 在我修改弧的扫描时发生了变化。然后我尝试检查 slides API
最多给了我这些参数：
{
"objectId": "p",
"pageElements": [
{
"objectId": "SLIDES_API17000000589_3",
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": -0.1652,
"scaleY": -0.1636,
"shearX": -0.1057,
"shearY": 0.1067,
"translateX": 6532089.87,
"translateY": 1296513.29,
"unit": "EMU"
},
"shape": {
"shapeType": "ARC",
"shapeProperties": {
"shapeBackgroundFill": {
"propertyState": "NOT_RENDERED",
"solidFill": {
"color": {
"themeColor": "LIGHT2"
},
"alpha": 1
}
},
"outline": {
"outlineFill": {
"solidFill": {
"color": {
"rgbColor": {
"red": 0.8509804,
"green": 0.8509804,
"blue": 0.8509804
}
},
"alpha": 1
}
},
"weight": {
"magnitude": 152400,
"unit": "EMU"
},
"dashStyle": "SOLID"
},
"shadow": {
"type": "OUTER",
"transform": {
"scaleX": 1,
"scaleY": 1,
"unit": "EMU"
},
"alignment": "BOTTOM_LEFT",
"blurRadius": {
"unit": "EMU"
},
"color": {
"rgbColor": {}
},
"alpha": 1,
"rotateWithShape": false,
"propertyState": "NOT_RENDERED"
},
"contentAlignment": "MIDDLE",
"autofit": {
"autofitType": "NONE",
"fontScale": 1
}
}
}
}
],
"slideProperties": {
"layoutObjectId": "p2",
"masterObjectId": "simple-light-2",
"notesPage": {
"objectId": "p:notes",
"pageType": "NOTES",
"pageElements": [
{
"objectId": "i2",
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": 2.032025,
"scaleY": 1.143,
"translateX": 381300,
"translateY": 685800,
"unit": "EMU"
},
"shape": {
"shapeProperties": {
"outline": {
"propertyState": "INHERIT"
}
},
"placeholder": {
"type": "SLIDE_IMAGE",
"parentObjectId": "n:slide"
}
}
},
{
"objectId": "i3",
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": 1.8288,
"scaleY": 1.3716,
"translateX": 685800,
"translateY": 4343400,
"unit": "EMU"
},
"shape": {
"shapeType": "TEXT_BOX",
"shapeProperties": {
"shapeBackgroundFill": {
"propertyState": "INHERIT"
},
"outline": {
"propertyState": "INHERIT"
},
"shadow": {
"propertyState": "INHERIT"
},
"autofit": {
"fontScale": 1
}
},
"placeholder": {
"type": "BODY",
"index": 1,
"parentObjectId": "n:text"
}
}
}
],
"pageProperties": {
"pageBackgroundFill": {
"propertyState": "INHERIT"
}
},
"notesProperties": {
"speakerNotesObjectId": "i3"
}
}
},
"revisionId": "_7MTqW3NeaZ8yQ",
"pageProperties": {
"pageBackgroundFill": {
"propertyState": "INHERIT"
}
}
}
我手动更改了圆弧的扫掠，除了 revisionId.
所以在这种情况下，鉴于我找不到任何现有的功能请求，您可能想使用以下模板自己提交一个：
https://issuetracker.google.com/issues/new?component=191598&template=823918
说明无法通过 API 或 Apps 脚本修改弧的扫描。确保添加尽可能多的信息和理由，以增加您获得关注的机会。
解决方法
最简单的方法可能是制作你认为你会使用的进度条，然后将它们保存在驱动器中，并在需要时插入它们。也就是说，对于您想要的每个进度阶段可能有 10 张图片。
或者，使用 canvas API 的方法稍微复杂一些。由于您可以通过 getUi 在边栏中加载 HTML，您还可以使用 canvas API 创建图像，同样，您可以从中创建图像并将它们传递给您的介绍。
这里有一个演示：
Code.gs
function test(){
// This creates the HTML output from the file arc-creator.html
let html = HtmlService.createHtmlOutputFromFile('arc-creator')
// This uses the html to load the sidebar
SlidesApp.getUi().showSidebar(html)
}
// This function will be called from the HTML once the canvas has finished drawing.
function addToPresentation(dataURL){
let slide = SlidesApp.getActivePresentation().getSlides()[0]
// Convert the data Url to png and add to Presentation
var type = (dataURL.split(";")[0]).replace('data:','');
var img = Utilities.base64Decode(dataURL.split(",")[1]);
var blob = Utilities.newBlob(img, type, "image.png");
slide.insertImage(blob);
}
arc-creator.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
<script>
// This is the function that creates a data URL image
// The argument is the percentage complete of the progress bar
function createProgressArc(number){
// ID the canvas element and initialize the context
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Some utility variables
var cw=context.canvas.width/2;
var ch=context.canvas.height/2;
// Drawing background
context.clearRect(0,0,200,200);
// Drawing first circle
context.beginPath();
context.arc(cw,ch,50,0,2*Math.PI);
context.fillStyle='#FFF';
context.fill();
context.strokeStyle='#e7f2ba';
context.lineWidth = 10;
context.stroke();
// Drawing arc
context.fillStyle='#000';
context.strokeStyle='#b3cf3c';
context.lineWidth=10;
context.beginPath();
let progress = (2 * Math.PI) * (number/100)
context.arc(cw,ch,50,0,progress);
context.stroke();
// Converting to data URL
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
let dataURL = createProgressArc(75)
// Here is where the resulting image is sent back to the Presentation as a data URL
google.script.run.addToPresentation(dataURL)
</script>
</html>
运行 这将在 UI 中打开侧边栏，绘制图像，然后将图像添加到第一张幻灯片。
这种方法的缺点是需要打开UI，否则不会运行需要画弧的JavaScript。