咸阳网站建设公司,网络推广项目计划书,seo优化是指通过研究搜索引擎排名规则,网站推广的正确方式目录 前言一、效果展示二、实现步骤1. 实现线条宽度#xff08;strokeWidth#xff09;的属性模块2. 实线线条样式#xff08;strokeDashArray#xff09;的属性模块3. 意料之外的“联动” 三、Show u the code后记 前言
上一篇博文中#xff0c;我们初步实现了右侧属性栏… 目录 前言一、效果展示二、实现步骤1. 实现线条宽度strokeWidth的属性模块2. 实线线条样式strokeDashArray的属性模块3. 意料之外的“联动” 三、Show u the code后记 前言
上一篇博文中我们初步实现了右侧属性栏通过属性栏我们可以便捷得修改画布中对象的颜色相关属性。
这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第三篇——右侧属性栏(线条宽度样式)主要的内容有
针对线条对象 扩充属性列表使用户可以修改画布中选中的线条的宽度和样式实线、虚线、点线等。 一、效果展示 动手体验 CodeSandbox会自动对代码进行编译并提供地址以供体验代码效果 由于CSDN的链接跳转有问题会导致页面无法工作请复制以下链接在浏览器打开 https://4z795q.csb.app/ 动态效果演示 本节之后我们的简历能做成什么样子 我们可以修改线条的宽度和样式了。 二、实现步骤
本节的实现的功能在我们的简历模板上没有太多的改变只改变了蓝色分隔线的宽度1 -- 2但作为一个通用的编辑器我们实现的功能还是很有价值的。下面开始实现
1. 实现线条宽度strokeWidth的属性模块
这里我们要继续修改上一篇博文中的属性工厂——object-props.js向其中添加一个控件StrokeWidthWrapper const StrokeWidthWrapper (props) {const strokeWidthOptions [1, 2, 3, 4, 5];// 下拉菜单选项列表const optionViews strokeWidthOptions.map((option, index) {return (Option classNameproperty-stroke-widthkey{stroke-width-${option}} value{option} title{option}div classNameproperty-stroke-width-line style{{ height: ${option}px }} //Option);});return (div classNameproperty-row key{props.key}span classNameproperty-title宽度/spandiv classNameproperty-containerSelect value{strokeWidth} bordered{false} style{{ width: 100% }}onChange{(value) { handleChange(strokeWidth, value) }{optionViews}/Select/div/div);};代码很简洁分为 3 个部分
定义可选的线条宽度列表strokeWidthOptions这里我设置了最小为 1最大为 5可以根据自己的需要做出调整。通过strokeWidthOptions构造出下拉菜单的选项列表optionViews组装模块 注意 构造下拉菜单选项的代码中有一行div classNameproperty-stroke-width-line style{{ height: ${option}px }} /这里的作用是将下拉菜单的每个选项绘制成一条宽度对应的线条如下图所示 2. 实现一个新模块后要记得添加到属性列表中 const propertyWrapperMap {...line: [StrokeWrapper, StrokeWidthWrapper],...};2. 实线线条样式strokeDashArray的属性模块
strokeDashArray和strokeWidth类似但实现更复杂一些 const strokeDashArrayWrapper (props) {const strokeDashArrayOptions [{ key: 实线, fabricValue: null, cssValue: solid },{ key: 虚线, fabricValue: [5, 5], cssValue: dashed },{ key: 点线, fabricValue: [1, 1], cssValue: dotted },];/*** 根据传入的value返回对应的index*/const mapValueToIndex (value) {if (null ! value Array.isArray(value)) {for (let i 1; i strokeDashArrayOptions.length; i) {if (strokeDashArrayOptions[i].fabricValue[0] value[0]) {return i;}}}return 0;};const optionViews strokeDashArrayOptions.map((option, index) {return (Option classNameproperty-stroke-width key{stroke-dasharray-${index}}value{index} title{option.key}div classNameproperty-stroke-dasharray-linestyle{{ borderTopStyle: option.cssValue }} //Option);});return (div classNameproperty-row key{props.key}span classNameproperty-title线条/spandiv classNameproperty-containerSelect value{mapValueToIndex(_recoverValue(strokeDashArray, strokeWidth))}bordered{false} style{{ width: 100% }}onChange{(value) let adjustedValue _adjustValue(strokeDashArrayOptions[value].fabricValue, strokeWidth);handleChange(strokeDashArray, adjustedValue);}{optionViews}/Select/div/div);};可以看到strokeDashArray的实现复杂很多这里分别讲解
方法_adjustValue和_recoverValue 这两个方法在这里没有给出代码在下一小节会讲到。这个模块的 value 不直接设置设置的是选项列表中的索引index0, 1, 2, …原因 antd 的Select.Option不允许设置valuenull且只接受string和number类型。fabric.Line.strokeDashArray的默认值是 null同时接受数组例如[2, 2]作为参数。 和strokeWidth类似这个模块的下拉菜单选项也由div标签来绘制。 我们使用的是它的border-top-style来表示线段样式但其接受的值为string比如实线为solid虚线为dashed。所以这个模块的 value 拆分为fabricValue和cssValue两个。 strokeDashArray实现的效果如下 3. 意料之外的“联动”
本以为实现可以到此为止了但是在测试中发现了一个问题。当我设置线条的样式为虚线strokeDashArray[5, 5] 时如果将线条宽度strokeWidth从1逐渐增大到5一条细的虚线会变成粗的点线如下图所示 --- 但按照常理虚线加粗之后应该仍是虚线 说明我们的实现还存在问题对于上述strokeWidth和strokeDashArray两部分代码我们作出以下调整
将strokeWidth作为strokeDashArray的系数 “联动” 起来例如strokeWidth1时虚线的strokeDashArray[5, 5]strokeWidth2时strokeDashArray就变为[5 * 2, 5 * 2] [10, 10]。则有了以下代码分别用来根据当前的线条宽度缩放strokeDashArray数组中的每一位 const _adjustValue (value, factor) {if (null value) {return null;}return value.map((item) item * factor);};const _recoverValue (value, factor) {if (null value) {return null;}return value.map((item) Math.round(item / factor));};用户修改了线条宽度应该同时通过_adjustValue和_recoverValue更新strokeDashArray。修改strokeWidthWrapper中Select标签的onChange方法为 onChange{(value) {let adjustedValue _adjustValue(_recoverValue(strokeDashArray, strokeWidth), value);handleChange(strokeDashArray, adjustedValue);handleChange(strokeWidth, value);}}经过上述的调整一条虚线的宽度由1放大到5时仍是虚线。 --- 三、Show u the code
按照惯例本节的完整代码我也托管在了CodeSandbox中点击前往查看完整代码 后记
本节中我们为线条对象Line实现了修改宽度和样式的属性模块。
在下一节中我们会为线条两端加上端点如箭头、圆点、菱形等。
