1.0.15 • Published 10 days ago
draw-rope v1.0.15
直接在画布中绘制弯曲的带有贴图纹理的绳子
ps：圆角模式开启参数为needRadius，默认为false，设置为true时会在途径点设置圆角，
效果
如何使用
npm install draw-rope;你需要准备一张纵向的绳子图片（如下所示，注意保持首位连贯，确保他们能够正确的循环）
页面内：
import { drawRope } from "draw-rope/index.js";
var canvas = document.getElementById("canvas");
var pwArr_test = [
{ x: 20, y: 30 },
{ x: 200, y: 120 },
{ x: 280, y: 500 },
{ x: 480, y: -300 },
{ x: 780, y: 100 },
{ x: 380, y: 200 },
{ x: 180, y: 500 },
{ x: 480, y: 600 },
{ x: 680, y: 300 },
];
<!-- pwArr_test = [
{ x: 20, y: 50 },
{ x: 300, y: 50 },
{ x: 300, y: 500 },
{ x: 60, y: 500 },
]; -->
drawRope({
canvas: canvas,
ropeImageUrl: 'rope.png',//图片src，最好绝对路径
pwArr: pwArr_test,//途径点位坐标集，至少2个
drawWidth: 50,//绳子宽度
bezierNum: 100,//贝塞尔幅度
needRadius:false,//圆角模式
unitLength: 1,//单段弧长
radius: 50,//圆角大小
average: true,//是否平均分割
showControlPoint: true,//是否显示控制点
});完整html测试文件，记得先安装 ：npm install draw-rope;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rope Curve</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.rootBox{
width: 500px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ctlBox{
width: 100%;
margin-top: 10px;
display: flex;
justify-content: center;
button{
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ccc;
cursor: pointer;
}
}
canvas {
border: 1px solid #ccc;
width: 400px;
height: 300px;
}
.inputhk{
width: 100%;
}
</style>
</head>
<body>
<div class="rootBox">
<div class="ctlBox" id="text-yj" style="margin-bottom: 10px;">
当前模式：圆角模式
</div>
<canvas id="canvas" width="800" height="600"></canvas>
<div class="ctlBox">
<button onClick="chooseImg()">
切换图片
</button>
<button onClick="chooseYJfn()">
圆角模式
</button>
<button onClick="chooseDWfn()">
切换点位
</button>
<button onClick="chooseAverage()">
平均切割
</button>
<button onClick="choosePointShow()">
显示控制点
</button>
</div>
<div class="ctlBox">
线宽调节
<input class="inputhk" type="range" min="1" max="100" value="30" oninput="drawWidthChange(this.value)">
</div>
<div class="ctlBox">
单段弧长调节
<input class="inputhk" type="range" min="1" max="50" value="2" oninput="unitLengthChange(this.value)">
</div>
<div class="ctlBox">
贝塞尔长度调节（非圆角模式下）
<input class="inputhk" type="range" min="1" max="300" value="30" oninput="bezierChange(this.value)">
</div>
<div class="ctlBox">
圆角调节（圆角模式下）
<input class="inputhk" type="range" min="1" max="100" value="30" oninput="radiusChange(this.value)">
</div>
</div>
<script type="module">
import { drawRope } from "./node_modules/draw-rope/index.js";
// Example usage
var canvas = document.getElementById("canvas");
var imgSrc = './rope.png';
var _drawWidth = 30;
var _unitLength = 1;
var _bezierNum = 100;
var _needRadius = true;
var _radius = 80;
var _showControlPoint = true;
var _average = true;
var pwArr_test = [
{ x: 20, y: 50 },
{ x: 300, y: 50 },
{ x: 300, y: 500 },
// { x: 60, y: 500 },
];
radiusChange();
//绘制宽度
function drawWidthChange(val){
_drawWidth = val;
drawSth();
}
window.drawWidthChange = drawWidthChange;
//单段弧长调节
function unitLengthChange(val){
_unitLength = val;
drawSth();
}
window.unitLengthChange = unitLengthChange;
//bezierNum调节
function bezierChange(val){
_bezierNum = val;
drawSth();
}
window.bezierChange = bezierChange;
//绘制圆角半径
function radiusChange(val){
_radius = val;
drawSth();
}
window.radiusChange = radiusChange;
//切换控制点显示
function showControlPoint(){
_showControlPoint = !_showControlPoint;
drawSth();
}
window.showControlPoint = showControlPoint;
//切换平均分割模式
function chooseAverage(){
_average = !_average;
drawSth();
}
window.chooseAverage = chooseAverage;
//切换控制点显示
function choosePointShow(){
_showControlPoint = !_showControlPoint;
drawSth();
}
window.choosePointShow = choosePointShow;
//切换圆角模式
function chooseYJfn(){
_needRadius = !_needRadius;
var text = _needRadius ? '圆角模式' : '非圆角模式';
document.getElementById('text-yj').innerText = '当前模式：' + text;
drawSth();
}
window.chooseYJfn = chooseYJfn;
// 切换图片
function chooseImg(){
if(imgSrc == './rope.png'){
imgSrc = './rope1.png';
}else{
imgSrc = './rope.png';
}
drawSth();
}
window.chooseImg = chooseImg;
function chooseDWfn(){
if(window.index_p_a === undefined){
window.index_p_a = 0;
}
var index = window.index_p_a++;
if(window.index_p_a == 4){
window.index_p_a = 0;
}
switch(index){
case 0:
pwArr_test = [
{ x: 20, y: 30 },
{ x: 200, y: 120 },
{ x: 280, y: 500 },
{ x: 480, y: -300 },
{ x: 780, y: 100 },
{ x: 380, y: 200 },
{ x: 180, y: 500 },
{ x: 480, y: 600 },
{ x: 680, y: 300 },
];
break;
case 1:
pwArr_test = [
{ x: 20, y: 50 },
{ x: 300, y: 50 },
{ x: 300, y: 500 },
{ x: 60, y: 500 },
];
break;
case 2:
pwArr_test = [
{ x: 120, y: 50 },
{ x: 400, y: 50 },
{ x: 400, y: 500 },
{ x: 120, y: 500 },
{ x: 120, y: 100 },
];
break;
case 3:
pwArr_test = [
{ x: 380, y: 200 },
{ x: 30, y: 250 },
{ x: 70, y: 400 },
{ x: 220, y: 200 },
{ x: 380, y: 100 },
{ x: 400, y: 400 },
];
break;
}
drawSth();
}
window.chooseDWfn = chooseDWfn;
function drawSth(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRope({
canvas: canvas,
ropeImageUrl: imgSrc,
pwArr: pwArr_test,
drawWidth: _drawWidth,
unitLength: _unitLength,
bezierNum: _bezierNum,
needRadius:_needRadius,
radius: _radius,
average: _average,
showControlPoint: _showControlPoint
});
}
</script>
</body>
</html>