html5 Canvas+js は PS ペンの切り抜きを実装します

PSペン切り抜きを実現するhtml5 Canvas+js

1. プロジェクト要件は、Photoshopでペン切り抜き機能を実装するためにjsを使用する必要がありましたが、それを解決するのに3〜4日近くかかり、最終的にはほぼ実現されました。 。

このプロセスでは多くの回り道をしましたが、最終的に同僚がコア属性 globalCompositeOperation = "destination-out" を比較するためのキャンバスを見つけました。

この属性は、複数の点で構成される閉じた間隔を通じて透明色に設定できます。背景色または背景画像を送信すると、手間が大幅に軽減されます。

2. 実装効果:

マウスをクリックすると、すべての点が閉じた間隔に接続され、任意の点を自由にドラッグできます。閉じた間隔が形成されると、任意の 2 つの点の間に新しい点を追加できます。ドラッグ用。

3. 実装アイデア:

p の 2 つのレイヤーを設定し、下のレイヤーに画像を設定し、上のレイヤーにキャンバスのキャンバスを設定します (画像がキャンバスにレンダリングされる場合は、切り抜くときにちらつくので一番下のレイヤーに行きます）、キャンバス上で

をモニターします。マウスイベントにより点と点間の線が繰り返し描画され、閉じた間隔を形成した後、キャンバス全体に小さな背景が描画されます。画像を作成すると、閉じた区間が透明色で描画されます。そして、ポイントの相対キャンバス

座標を配列に記録または更新します。写真を撮った後、点の座標セットが背景に返され、背景コードは座標点と写真の幅と高さに従ってスクリーンショットを実現し、

を背景色に透明に設定します( Canvas もスクリーンショットを実現できますが、ピクセルを処理する必要があります) 背景の透明性の実現はまだ実装されておらず、C# 背景コードを使用して実装される予定です)。

4.js (書き方が統一されておらずわかりにくいので、参考程度にしてください)

<script type="text/javascript">
        $(function () {
            var a = new tailorImg();
            a.iniData();
        });
        //
        var tailorImg=function()
        {
            this.iniData = function () {
                //画布
                this.can.id = "canvas";
                this.can.w = 400;
                this.can.h = 400;
                this.can.roundr = 7;
                this.can.roundrr = 3;
                this.can.curPointIndex = 0;
                this.can.imgBack.src = "gzf.png";
                this.can.canvas = document.getElementById(this.can.id).getContext("2d");
                //图片
                this.img.w = 400;
                this.img.h = 400;
                this.img.image.src = "flower.jpg";
                //加载事件：
                //初始化事件：
                var a = this;
                var p = a.can.pointList;
                $("#" + a.can.id).mousemove(function (e) {
                    if (a.can.paint) {//是不是按下了鼠标  
                        if (p.length > 0) {
                            a.equalStartPoint(p[p.length - 1].pointx, p[p.length - 1].pointy);
                        }
                        a.roundIn(e.offsetX, e.offsetY);
                    }
                    //判断是否在直线上
                    //光标移动到线的附近如果是闭合的需要重新划线，并画上新添加的点
                    a.AddNewNode(e.offsetX, e.offsetY);
                });
                $("#" + a.can.id).mousedown(function (e) {
                    a.can.paint = true;
                    //点击判断是否需要在线上插入新的节点：
                    if (a.can.tempPointList.length > 0) {
                        a.can.pointList.splice(a.can.tempPointList[1].pointx, 0, new a.point(a.can.tempPointList[0].pointx, a.can.tempPointList[0].pointy));
                        //清空临时数组
                        a.can.tempPointList.length = 0;
                    }
                });
                $("#" + a.can.id).mouseup(function (e) {
                    //拖动结束
                    a.can.paint = false;
                    //拖动结束；
                    if (a.can.juPull) {
                        a.can.juPull = false;
                        a.can.curPointIndex = 0;
                        //验证抠图是否闭合：闭合，让结束点=开始点；添加标记
                        a.equalStartPoint(p[p.length - 1].pointx, p[p.length - 1].pointy);
                        //判断是否闭合：
                        if (a.can.IsClose) {

                        }
                    }
                    else {
                        //如果闭合：禁止添加新的点；
                        if (!a.can.IsClose) {//没有闭合
                            p.push(new a.point(e.offsetX, e.offsetY));
                            //验证抠图是否闭合：闭合，让结束点=开始点；添加标记
                            a.equalStartPoint(p[p.length - 1].pointx, p[p.length - 1].pointy);
                            //判断是否闭合：
                            //重新画；
                            if (p.length > 1) {
                                a.drawLine(p[p.length - 2].pointx, p[p.length - 2].pointy, p[p.length - 1].pointx, p[p.length - 1].pointy);
                                a.drawArc(p[p.length - 1].pointx, p[p.length - 1].pointy);
                            } else {
                                a.drawArc(p[p.length - 1].pointx, p[p.length - 1].pointy);
                            }
                        }
                        else {
                            //闭合
                        }
                    }
                    //验证是否填充背景：
                    if (a.can.IsClose) {
                        a.fillBackColor();
                        a.drawAllLine();
                    }
                });
                $("#" + a.can.id).mouseleave(function (e) {
                    a.can.paint = false;
                });
                //鼠标点击事件：
                $("#" + a.can.id).click(function (e) {
                    //空
                });
            }
            this.point = function (x, y) {
                this.pointx = x;
                this.pointy = y;
            };
            //图片
            this.img = {
                image:new Image(),
                id: "",
                w:0,
                h:0
            };
            //画布；
            this.can = {
                canvas:new Object(),
                id: "",
                w: 0,
                h: 0,
                //坐标点集合
                pointList: new Array(),
                //临时存储坐标点
                tempPointList: new Array(),
                //圆点的触发半径：
                roundr: 7,
                //圆点的显示半径：
                roundrr: 7,
                //当前拖动点的索引值；
                curPointIndex : 0,
                //判断是否点击拖动
                paint : false,
                //判断是否点圆点拖动，并瞬间离开,是否拖动点；
                juPull : false,
                //判断是否闭合
                IsClose: false,
                imgBack: new Image()
                
            };
            //函数：
            //更新画线
            this.drawAllLine=function () {
                for (var i = 0; i < this.can.pointList.length - 1; i++) {
                    //画线
                    var p = this.can.pointList;
                    this.drawLine(p[i].pointx, p[i].pointy, p[i + 1].pointx, p[i + 1].pointy);
                    //画圈
                    this.drawArc(p[i].pointx, p[i].pointy);
                    if (i == this.can.pointList.length - 2) {
                        this.drawArc(p[i+1].pointx, p[i+1].pointy);
                    }
                }
            }
            //画线
            this.drawLine = function (startX, startY, endX, endY) {
                //var grd = this.can.canvas.createLinearGradient(0, 0,2,0); //坐标，长宽
                //grd.addColorStop(0, "black"); //起点颜色
                //grd.addColorStop(1, "white");
                //this.can.canvas.strokeStyle = grd;
                this.can.canvas.strokeStyle = "blue"
                this.can.canvas.lineWidth =1;
                this.can.canvas.moveTo(startX, startY);
                this.can.canvas.lineTo(endX, endY);
                this.can.canvas.stroke();
            }
            //画圈：
            this.drawArc=function(x, y) {
               this.can.canvas.fillStyle = "blue";
                this.can.canvas.beginPath();
                this.can.canvas.arc(x, y,this.can.roundrr, 360, Math.PI * 2, true);
                this.can.canvas.closePath();
                this.can.canvas.fill();
            }
            //光标移到线上画大圈：
            this.drawArcBig = function (x, y) {
                this.can.canvas.fillStyle = "blue";
                this.can.canvas.beginPath();
                this.can.canvas.arc(x, y, this.can.roundr+2, 360, Math.PI * 2, true);
                this.can.canvas.closePath();
                this.can.canvas.fill();
            }
            //渲染图片往画布上
            this.showImg=function() {
                this.img.image.onload = function () {
                    this.can.canvas.drawImage(this.img.image, 0, 0, this.img.w,this.img.h);
                };
            }
            //填充背景色
            this.fillBackColor = function () {
                for (var i = 0; i <this.img.w; i += 96) {
                    for (var j = 0; j <= this.img.h; j += 96) {
                        this.can.canvas.drawImage(this.can.imgBack, i, j, 96, 96);
                    }
                }
                this.can.canvas.globalCompositeOperation = "destination-out";
                this.can.canvas.beginPath();
                for (var i = 0; i <this.can.pointList.length; i++) {
                    this.can.canvas.lineTo(this.can.pointList[i].pointx,this.can.pointList[i].pointy);
                }
                this.can.canvas.closePath();
                this.can.canvas.fill();
                this.can.canvas.globalCompositeOperation = "destination-over";
                this.drawAllLine();
            }
            //去掉pointlist最后一个坐标点：
            this.clearLastPoint=function () {
                this.can.pointList.pop();
                //重画：
                this.clearCan();
                this.drawAllLine();
            }
            //判断结束点是否与起始点重合；
            this.equalStartPoint = function (x,y) {
                var p = this.can.pointList;
                if (p.length > 1 && Math.abs((x - p[0].pointx) * (x - p[0].pointx)) + Math.abs((y - p[0].pointy) * (y - p[0].pointy)) <= this.can.roundr * this.can.roundr) {
                    //如果闭合
                    this.can.IsClose = true;
                    p[p.length - 1].pointx = p[0].pointx;
                    p[p.length - 1].pointy = p[0].pointy;
                }
                else {
                    this.can.IsClose = false;
                }
            }
            //清空画布
            this.clearCan=function (){
                this.can.canvas.clearRect(0, 0, this.can.w, this.can.h);
            }
            //剪切区域
            this.CreateClipArea=function () {
                this.showImg();
                this.can.canvas.beginPath();
                for (var i = 0; i <this.can.pointList.length; i++) {
                    this.can.canvas.lineTo(this.can.pointList[i].pointx,this.can.pointList[i].pointy);
                }
                this.can.canvas.closePath();
                this.can.canvas.clip();
            }
            //
            this.CreateClipImg=function()
            {

            }
            //判断鼠标点是不是在圆的内部：
            this.roundIn = function (x, y) {
                //刚开始拖动
                var p = this.can.pointList;
                if (!this.can.juPull) {
                    for (var i = 0; i < p.length; i++) {

                        if (Math.abs((x - p[i].pointx) * (x - p[i].pointx)) + Math.abs((y - p[i].pointy) * (y - p[i].pointy)) <= this.can.roundr * this.can.roundr) {
                            //说明点击圆点拖动了；
                            this.can.juPull = true;//拖动
                            //
                            this.can.curPointIndex = i;
                            p[i].pointx = x;
                            p[i].pointy = y;
                            //重画：
                            this.clearCan();
                            //showImg();
                            if (this.can.IsClose) {
                                this.fillBackColor();
                            }
                            this.drawAllLine();
                            return;
                        }
                    }
                }
                else {//拖动中
                    p[this.can.curPointIndex].pointx = x;
                    p[this.can.curPointIndex].pointy = y;
                    //重画：
                    this.clearCan();
                    if (this.can.IsClose) {
                        this.fillBackColor();
                    }
                    this.drawAllLine();
                }
            };

            //光标移到线上，临时数组添加新的节点：
           this.AddNewNode=function(newx, newy) {
               //如果闭合
               var ii=0;
                if (this.can.IsClose) {
                    //判断光标点是否在线上：
                    var p = this.can.pointList;
                    for (var i = 0; i < p.length - 1; i++) {
                        //计算a点和b点的斜率
                        var k = (p[i + 1].pointy - p[i].pointy) / (p[i + 1].pointx - p[i].pointx);
                        var b = p[i].pointy - k * p[i].pointx;
                        //if (parseInt((p[i + 1].pointy - p[i].pointy) / (p[i + 1].pointx - p[i].pointx)) ==parseInt((p[i + 1].pointy - newy) / (p[i + 1].pointx - newx)) && newx*2-p[i+1].pointx-p[i].pointx<0 && newy*2-p[i+1].pointy-p[i].pointy<0) {
                        //    //如果在直线上
                        //    alert("在直线上");
                        //}
                        $("#txtone").val(parseInt(k * newx + b));
                        $("#txttwo").val(parseInt(newy));
                        if (parseInt(k * newx + b) == parseInt(newy) && (newx - p[i + 1].pointx) * (newx - p[i].pointx) <= 2 && (newy - p[i + 1].pointy) * (newy - p[i].pointy) <= 2) {
                            //
                            //parseInt(k * newx + b) == parseInt(newy)
                            //添加临时点：
                            this.can.tempPointList[0] = new this.point(newx, newy);//新的坐标点
                            this.can.tempPointList[1] = new this.point(i+1, i+1);//需要往pointlist中插入新点的索引；
                            i++;
                            //alert();
                            //光标移动到线的附近如果是闭合的需要重新划线，并画上新添加的点；
                            if (this.can.tempPointList.length > 0) {
                                //重画：
                                this.clearCan();
                                //showImg();
                                if (this.can.IsClose) {
                                    this.fillBackColor();
                                }
                                this.drawAllLine();
                                this.drawArcBig(this.can.tempPointList[0].pointx, this.can.tempPointList[0].pointy);
                                return;
                            }
                            return;
                        }
                        else {
                           // $("#Text1").val("");
                        }
                    }
                    if (ii == 0) {
                        if (this.can.tempPointList.length > 0) {
                            //清空临时数组；
                            this.can.tempPointList.length = 0;
                            //重画：
                            this.clearCan();
                            //showImg();
                            if (this.can.IsClose) {
                                this.fillBackColor();
                            }
                            this.drawAllLine();
                            //this.drawArc(this.can.tempPointList[0].pointx, this.can.tempPointList[0].pointy);
                        }
                    }
                }
                else {
                    //防止计算误差引起的添加点，当闭合后，瞬间移动起始点，可能会插入一个点到临时数组，当再次执行时，
                    //就会在非闭合情况下插入该点，所以，时刻监视：
                    if (this.can.tempPointList.length > 0) {
                        this.can.tempPointList.length = 0;
                    }
                }
           }
            
        };

    </script>

<style type="text/css">
        .canvasDiv {
            position: relative;
            border: 1px solid red;
            height: 400px;
            width: 400px;
            top: 50px;
            left: 100px;
            z-index: 0;
        }

        img {
            width: 400px;
            height: 400px;
            z-index: 1;
            position: absolute;
        }

        #canvas {
            position: absolute;
            border: 1px solid green;
            z-index: 2;
        }
        .btnCollection {
            margin-left: 100px;
        }
    </style>

<div class="canvasDiv">
<img src="flower.jpg" />
<canvas id="canvas" width="400" height="400" style="border: 1px solid green;"></canvas>
</div>

概要:

欠点:カーソルが線に移動したときに、点が上にあるかどうかを判断する計算方法がない2 つの点を結ぶ直線。正解です。点が 2 つの円の 2 つの外側接線で囲まれた長方形

内にあるかどうかとして計算する必要があります。ペン先を小さな p 正方形に置き換える方が合理的です。 、以下の長方形の切り抜きのように (アイデア: 取得した点座標セットと動的に追加された小さな p 正方形の間の対応関係を確立します)

小さな正方形がドラッグされると、座標点セットを更新するイベントがトリガーされ、再作成されます。 -与える）。是 只 6. これは JS ペンカットの単なる解決策です。プロジェクト内のこれはまだ改善中です。良い方法や情報があれば、共有したいと思います。ありがとうございます

PSペン切り抜きを実装したhtml5 Canvas+jsに関連するその他の記事については、PHP中国語Webサイトに注目してください。