标签: stroke
如何在放大SVG画布时保持像素？
我已经构建了一个用于放大/缩小SVG画布的前端工具,但是当我缩放时,任何1px笔画的宽度都会增加(视觉上).是否有一个svg设置,以确保缩放时1px笔划保持1px(视觉)？我记得在某处读过它,却找不到资源.
5
推荐指数
推荐指数
1
解决办法
解决办法
1151
查看次数
查看次数
具有自定义厚度的虚线分隔线
我有一个虚线分隔符
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<!--
#17b851 #C7B299
-->
<stroke
android:color="#9e9c85"
android:dashWidth="10px"
android:dashGap="10px"
/>
</shape>
现在它几乎看不到.我怎样才能让它变厚.我尝试给android:height ="2px"和android:dashHeight ="5px",但它没有用.
5
推荐指数
推荐指数
2
解决办法
解决办法
4919
查看次数
查看次数
Android - 笔划在圆角矩形的角落看起来像素化
为什么矩形角落的笔划如此难看？如果我在xml中绘制形状,它工作正常(至少它在活动中工作,我无法用小部件测试它).
Paint strokePaint = new Paint();
strokePaint.setARGB(255, 16, 23, 131);
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setStrokeWidth(8);
我正在测试hdpi密度.有人遇到过这个问题吗？
4
推荐指数
推荐指数
1
解决办法
解决办法
1787
查看次数
查看次数
清除HTML5 Canvas上的strokeRect()
我可以在画布上绘制一个带边框的正方形.但是,当我尝试使用该clearRect()函数清除此带边框的方形时,某些笔划不会被清除.
HTML
<div>
<canvas width="300" height="250">
</canvas>
</div>
JS
var $context = $('canvas')[0].getContext('2d');
// Create 4 filled squares
$context.fillStyle = 'pink';
$context.fillRect(120, 0, 30, 30);
$context.fillRect(120, 30, 30, 30);
$context.fillRect(150, 0, 30, 30);
$context.fillRect(150, 30, 30, 30);
// Create borders around them
$context.strokeRect(120, 0, 30, 30);
$context.strokeRect(120, 30, 30, 30);
$context.strokeRect(150, 0, 30, 30);
$context.strokeRect(150, 30, 30, 30);
// Now erase the squares (individually)
$context.clearRect(120, 0, 30, 30);
$context.clearRect(120, 30, 30, 30);
$context.clearRect(150, 0, 30, 30);
$context.clearRect(150, 30, …4
推荐指数
推荐指数
1
解决办法
解决办法
7557
查看次数
查看次数
为Shape的笔触宽度设置动画
我有一个带有透明中心的粗圆:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="@android:color/transparent"/>
<stroke
android:width="24dp"
android:color="@android:color/white"/>
<size
android:width="72dp"
android:height="72dp"/>
</shape>
并希望动画减少笔画值,使透明中心像虹膜一样扩张.
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="????"
android:valueFrom="24dp"
android:valueTo="4dp"
android:duration="750"
/>
</set>
...但我不知道要指定什么作为属性名称."strokeWidth"似乎不起作用.我甚至不确定如何以编程方式将其拉出来,因为GradientDrawable.setStroke()需要宽度和颜色,而objectAnimator只能操作单个参数属性.
4
推荐指数
推荐指数
1
解决办法
解决办法
5115
查看次数
查看次数
描边宽度 = 1px 的线条的外观
我正在处理需要细垂直线的可视化。理想情况下，我希望它们的宽度为 1px。当我使用线性比例宽度（默认的“range()”）定位它们时，它们显示为不同的宽度，因为它们的计算位置并不总是整数像素。不过，其中一些看起来正好是 1 像素宽（那些更亮）。
rangeRound()然而，当我在线性刻度上使用时，所有线条都具有相同的表观宽度，但它是 2px，即使我明确指定了 1px 笔画宽度。使用舍入Math.round()给出相同的结果。当我尝试使用 0.5 的笔触宽度时，线条也是 2px 宽，只是变暗了。
是否可以绘制“真实”的 1px 宽的线？
编辑：这是一些代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
svg {
border : 1px solid grey;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var W = 1000, H = 400;
var svg = d3.select("body").append("svg").attr("width",W).attr("height",H);
svg.append("line").attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black");
svg.append("line").attr("x1",0).attr("y1",H/2).attr("x2",W).attr("y2",H/2).attr("stroke","black");
</script>
</body>
</html>
在我的屏幕 (1920 x 1080) 上，边框看起来像 1px 宽，但 svg 线看起来像 2px。
4
推荐指数
推荐指数
1
解决办法
解决办法
2108
查看次数
查看次数
使用SVG过滤器创建内部笔触
我想在svg路径上进行模拟和“内部笔划”。我有一个svg贴图，其中包含多个复杂路径（国家/地区），每个路径具有不同的填充色描边。我想在第一个中添加“假内笔画”。我设法用内阴影技巧（带有高斯模糊滤镜）完成了一些工作，但无法将其作为“非模糊”处理。
理想的解决方案是使用svg过滤器，因此我可以通过JS动态应用它，而无需更改路径或操纵dom。
非常感谢 ！编辑1：到目前为止，我已经尝试过此技巧，但假阴影有时会在笔画上模糊不清，因此我不确定这是否是最好的方法...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" style="transform:scale(2);transform-origin:0 0 ">
<defs>
<filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
<feFlood fill-color="black"/>
<feComposite in2="SourceAlpha" operator="out"/>
<feGaussianBlur stdDeviation='10' edgeMode="none" />
<feOffset dx='0' dy='0' result='offsetblur'/>
<feFlood flood-color='#00ff00' result='color'/>
<feComposite in2='offsetblur' operator='in'/>
<feComposite in2='SourceAlpha' operator='in' />
<feMerge>
<feMergeNode in='SourceGraphic'/>
<feMergeNode/>
</feMerge>
</filter>
</defs>
<path class="st0" d="M144.7,126.2l-2.8,8.8l-3.9-2.3l-2-7.7l1.7-4.3l5.5-4.4L144.7,126.2z M93.5,24.2l6,6.3l4.4-1l7.5,6l1.9,1.1
l2.5-0.3l4,3.4l12.3,2.4l-4.3,8.9l-1.1,9.1l-2.4,2.2l-3.9-1.2l0.3,3.2l-6.3,7l-0.1,5.6l4.1-1.9l2.9,5.4L121,84l2.5,4.6l-3,3.7
l2.2,9.3l4.6,1.5l-1,5.1l-7.8,6.6l-16.9-3.2l-12.5,3.8l-1,7l-9.9,1.5l-9.6-5.3l-3.1,2.5l-15.8-5.3l-3.4-4.6l4.4-7.1l1.6-24.1
l-8.8-13l-6.3-6.4l-13.1-4.9l-0.9-9.4l11.1-2.8L48.9,47l-2.7-14.8l8.1,5.7l20-10.3l2.6-11l7.5-2.8l1.3,4.8l4,0.2L93.5,24.2z" stroke-width="1" fill="#00ffff" stroke="#FF0000" filter="url(#inset)"/>
</svg>4
推荐指数
推荐指数
2
解决办法
解决办法
2545
查看次数
查看次数
SVG 笔划线帽仅在一端
是否可以仅在笔划的一端添加线帽？不是两端都像下面示例中显示的默认值一样。
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke-linecap="butt"
x1="30" y1="30" x2="30" y2="90"
stroke="teal" stroke-width="20"/>
<line stroke-linecap="round"
x1="60" y1="30" x2="60" y2="90"
stroke="teal" stroke-width="20"/>
<path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
stroke="white" />
</svg>4
推荐指数
推荐指数
2
解决办法
解决办法
3822
查看次数
查看次数
使用CSS，如何创建“厚于” 1px的文本笔划轮廓？
下面是我用来做1px的Text Stroke轮廓的代码。但是，如何使轮廓变粗呢？如果仅将所有“ 1px”替换为“ 5px”，结果看起来很疯狂。
的HTML
<div class="element">
Hello!
</div>
的CSS
.element {
color:white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
4
推荐指数
推荐指数
1
解决办法
解决办法
1396
查看次数
查看次数
Openlayers：如何在线要素周围添加彩色边框
我想为线要素指定边框。在下面的代码中，我可以根据道路类型指定描边颜色，但我想在其上指定另一个边框。例如，我想为最后一个 else 语句分配一个边框。属于该类别的任何功能都应与描边颜色接壤。我怎样才能做到这一点？
图片：
<!doctype html>
<html>
<head>
<title>Vector Tiles</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css" />
<style>
.map {
width: 100%;
height: 100vh;
}
body {
margin: 0;
}
</style>
</head>
<body>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script>
var popup = new ol.Overlay({
element: document.getElementById('popup')
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var styleFunction = function(feature) {
console.log(feature);
//assign symbology of roads based on road type
var color;
if (feature.get("type")=='primary' && 'secondary' && 'trunk'){ …4
推荐指数
推荐指数
1
解决办法
解决办法
2457
查看次数
查看次数