问Fabric.js折线自定义控件怎么实现？

提问于 2022-09-23 02:42:25

回答 0关注 0查看 200

Fabric.js 官方demo有个多边形自定义的控件 http://fabricjs.com/custom-controls-polygon

但是将其中的多边形替换成折线会出现问题线不跟着控制点或者控制点不在线上哪位大神帮忙实现下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .controls {
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="controls">
    <p>
        <button id="edit" onclick="Edit()">Toggle editing polygon</button>
    </p>
</div>
<canvas id="c" width="500" height="400" style="border:1px solid #ccc"></canvas>
<script src="./fabric.js"></script>
<script>
    var canvas = this.__canvas = new fabric.Canvas('c');
    // create a polygon object
    var points = [{
        x: 30, y: 30
    }, {
        x: 150, y: 140
    }, {
        x: 240, y: 150
    }, {
        x: 100, y: 30
    } ]
    // 将官方多边形替换成折线
    const polygon = new fabric.Polyline([
        {x: 30, y: 30},
        {x: 150, y: 140},
        {x: 240, y: 150},
        {x: 100, y: 30}
    ], {
        fill: 'transparent', // 如果画折线，需要填充透明
        stroke: '#6639a6', // 线段颜色：紫色
        strokeWidth: 5 // 线段粗细 5
    })
    canvas.viewportTransform = [1, 0, 0, 0.7, -50, 50];
    canvas.add(polygon);

    // define a function that can locate the controls.
    // this function will be used both for drawing and for interaction.
    function polygonPositionHandler(dim, finalMatrix, fabricObject) {
        var x = (fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x),
            y = (fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y);

        console.log('x',x);
        console.log('y',y);
        return fabric.util.transformPoint(
            { x: x, y: y },
            fabric.util.multiplyTransformMatrices(
                fabricObject.canvas.viewportTransform,
                fabricObject.calcTransformMatrix()
            )
        );
    }

    function getObjectSizeWithStroke(object) {
        var stroke = new fabric.Point(
            object.strokeUniform ? 1 / object.scaleX : 1,
            object.strokeUniform ? 1 / object.scaleY : 1
        ).multiply(object.strokeWidth);
        return new fabric.Point(object.width + stroke.x, object.height + stroke.y);
    }

    // define a function that will define what the control does
    // this function will be called on every mouse move after a control has been
    // clicked and is being dragged.
    // The function receive as argument the mouse event, the current trasnform object
    // and the current position in canvas coordinate
    // transform.target is a reference to the current object being transformed,
    function actionHandler(eventData, transform, x, y) {
        var polygon = transform.target;
        var    currentControl = polygon.controls[polygon.__corner];
        var   mouseLocalPosition = polygon.toLocalPoint(new fabric.Point(x, y), 'center', 'center');
        var   polygonBaseSize = getObjectSizeWithStroke(polygon);
        var   size = polygon._getTransformedDimensions(0, 0);
        var   finalPointPosition = {
                x: mouseLocalPosition.x * polygonBaseSize.x / size.x + polygon.pathOffset.x,
                y: mouseLocalPosition.y * polygonBaseSize.y / size.y + polygon.pathOffset.y
            };
        polygon.points[currentControl.pointIndex] = finalPointPosition;
        return true;
    }

    // define a function that can keep the polygon in the same position when we change its
    // width/height/top/left.
    function anchorWrapper(anchorIndex, fn) {
        return function(eventData, transform, x, y) {
            var fabricObject = transform.target,
                absolutePoint = fabric.util.transformPoint({
                    x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                    y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
                }, fabricObject.calcTransformMatrix()),
                actionPerformed = fn(eventData, transform, x, y),
                newDim = fabricObject._setPositionDimensions({}),
                polygonBaseSize = getObjectSizeWithStroke(fabricObject),
                newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
                newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
            fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
            return actionPerformed;
        }
    }

    function Edit() {
        // clone what are you copying since you
        // may want copy and paste on different moment.
        // and you do not want the changes happened
        // later to reflect on the copy.
        var poly = canvas.getObjects()[0];
        canvas.setActiveObject(poly);
        poly.edit = !poly.edit;
        if (poly.edit) {
            var lastControl = poly.points.length - 1;
            poly.cornerStyle = 'circle';
            poly.cornerColor = 'rgba(0,0,255,0.5)';
            /* 编辑状态重新画点 */
            poly.controls = poly.points.reduce(function(acc, point, index) {
                console.log('index',index);
                acc['p' + index] = new fabric.Control({
                    positionHandler: polygonPositionHandler,
                    actionHandler: anchorWrapper(index > 0 ? index - 1 : lastControl, actionHandler),
                    actionName: 'modifyPolygon',
                    pointIndex: index
                });
                return acc;
            }, { });
        } else {
            poly.cornerColor = 'blue';
            poly.cornerStyle = 'rect';
            poly.controls = fabric.Object.prototype.controls;
        }
        poly.hasBorders = !poly.edit;
        canvas.requestRenderAll();
    }

</script>


</body>
</html>

javascript

编程算法

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 1

正道知行

修改于 2022-08-25 13:57:52

import org.json4s.DefaultFormats
import org.json4s.native.Serialization.{read, write}

implicit lazy val formats: DefaultFormats.type = DefaultFormats

    val source = env.addSource(new SourceFunc_UserInfo())
    val dataStream = source
      // map
      .map(data => write(data)) // 转 json
      .map(json => read[UserInfo](json)) // 转 case class